/**
 * globals.css — student-portal 全局样式（ai14）
 *
 * 引入顺序：semantic.css（含 primitive.css）→ Tailwind 三层
 * 对齐 teacher-portal Shell 纸感设计（paper/ink/accent/rule）
 */

@import './semantic.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* === 基础排版 === */
@layer base {
  html,
  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }

  /* 焦点可见性（A11y WCAG 2.2）*/
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* 链接 */
  a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  a:hover {
    color: var(--color-accent-hover);
  }
}

/* === 组件层 === */
@layer components {
  /* 纸感分隔线 */
  .rule {
    border-top: 1px solid var(--color-rule);
  }

  .rule-thin {
    border-top: 2px solid var(--color-rule);
  }

  /* 左侧竖线标记（节点展开样式，对齐 teacher-portal）*/
  .mark-left {
    border-left: 2px solid var(--color-rule);
    padding-left: var(--space-md);
  }

  /* 纸感卡片 */
  .card-paper {
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-paper);
  }

  /* 主按钮 */
  .btn-primary {
    background: var(--color-accent);
    color: var(--color-paper);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-base);
    font-family: var(--font-sans);
    font-size: var(--font-size-3);
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .btn-primary:hover {
    background: var(--color-accent-hover);
  }

  .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* 次级按钮 */
  .btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-base);
  }

  /* 输入框 */
  .input-paper {
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-base);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-3);
    color: var(--color-ink);
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .input-paper:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: var(--shadow-focus);
  }

  /* 徽标 */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2);
    font-weight: 500;
  }

  .badge-success {
    background: hsl(var(--hue-success), var(--sat-success), 92%);
    color: var(--color-success);
  }

  .badge-warning {
    background: hsl(var(--hue-warning), var(--sat-warning), 92%);
    color: var(--color-warning);
  }

  .badge-danger {
    background: hsl(var(--hue-danger), var(--sat-danger), 92%);
    color: var(--color-danger);
  }

  .badge-info {
    background: hsl(var(--hue-info), var(--sat-info), 92%);
    color: var(--color-info);
  }
}

/* === 工具层 === */
@layer utilities {
  /* 文本截断 */
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 多行截断 */
  .text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 屏幕阅读器专用 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 减少动画（A11y prefers-reduced-motion）*/
  @media (prefers-reduced-motion: reduce) {
    .motion-safe {
      animation: none !important;
      transition: none !important;
    }
  }
}
