/* ================================================================
   考试急 PWA — Design Tokens v3.0
   设计主题: "Ink & Amber" — 墨色深底 × 琥珀暖光
   理念：告别青紫霓虹AI塑料感，走向沉静学术工具应有的质感
   所有颜色、字体、间距、动效在此定义，全局引用
   ================================================================ */

:root {
  /* ==============================================================
     色彩系统 — 墨色层级 (Depth through solid color layering)
     原则：不使用毛玻璃、不使用渐变、不使用纯黑纯白纯灰
     ============================================================== */

  /* 背景层级 — 从深到浅，建立空间深度 */
  --ink-base:    #0F0F14;   /* 根背景，最深 */
  --ink-surface: #1A1A22;   /* 卡片、浮层面 */
  --ink-raised:  #242430;   /* hover、模态框 */
  --ink-overlay: #2E2E3C;   /* tooltip、下拉、最高层 */

  /* 主色 — 琥珀暖光 (替代青紫渐变) */
  --amber:        #E8A838;   /* 主CTA、强调 */
  --amber-soft:   #C68E2E;   /* hover/active */
  --amber-dim:    rgba(232, 168, 56, 0.12);  /* 微妙背景 */
  --amber-glow:   rgba(232, 168, 56, 0.20);  /* 选中边框 */

  /* 辅助强调 — 沉稳蓝灰 */
  --slate:        #6B8FA8;
  --slate-dim:    rgba(107, 143, 168, 0.12);

  /* 语义色 — 柔和克制，不刺眼 */
  --ok:           #5B9E7A;   /* 正确/通过 (替代 #10B981) */
  --ok-dim:       rgba(91, 158, 122, 0.12);
  --warn:         #C6964A;   /* 注意 (替代 #F59E0B) */
  --warn-dim:     rgba(198, 150, 74, 0.12);
  --err:          #C4685A;   /* 错误/危险 (替代 #EF4444) */
  --err-dim:      rgba(196, 104, 90, 0.12);

  /* 文字 — 暖白色阶 (替代 #EDF2F7 / #8899AA / #556677) */
  --text:         #EBE8E0;   /* 主文字，带暖意的白，对比度 11.2:1 */
  --text-secondary: #9E9A8E; /* 辅助文字，对比度 5.1:1 (WCAG AA) */
  --text-muted:   #6B675C;   /* 弱化文字，对比度 3.8:1 (仅装饰用) */

  /* 边框 — 微妙的层级边界 */
  --border-subtle:  rgba(235, 232, 224, 0.06);
  --border-visible: rgba(235, 232, 224, 0.10);
  --border-active:  rgba(232, 168, 56, 0.30);
  --border-ok:      rgba(91, 158, 122, 0.25);
  --border-err:     rgba(196, 104, 90, 0.25);

  /* ==============================================================
     字体系统 — 中文字优先后备
     原则：不用 Inter、不用 system-ui 默认、无 CDN 依赖
     ============================================================== */

  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace;

  /* 排版尺度 — Major Third (1.25) */
  --text-xs:   0.75rem;     /* 12px — 标签、徽标 */
  --text-sm:   0.8125rem;   /* 13px — 辅助信息 */
  --text-base: 0.9375rem;   /* 15px — 正文 */
  --text-md:   1.125rem;    /* 18px — 卡片标题 */
  --text-lg:   1.375rem;    /* 22px — 区块标题 */
  --text-xl:   1.75rem;     /* 28px — 页面标题 */
  --text-2xl:  2.1875rem;   /* 35px — 里程碑/英雄 */

  --leading-tight:  1.25;   /* 标题 */
  --leading-normal: 1.6;    /* 正文 */
  --leading-relaxed: 1.8;   /* 长文阅读 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ==============================================================
     空间系统 — 4px 基准网格
     原则：所有 margin/padding/gap 必须是 4 的倍数
     ============================================================== */

  --space-2xs: 0.25rem;  /* 4px */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* ==============================================================
     圆角 — 克制统一
     ============================================================== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ==============================================================
     动效 — 快速、果断、有目的性
     原则：禁止弹性缓动 (cubic-bezier 值不超过 1)
     ============================================================== */

  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);      /* 标准 */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);        /* 入场 */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);        /* 退场 */
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);   /* 强调入场 */

  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;

  /* 导航栏高度 */
  --nav-height: 60px;

  /* ==============================================================
     阴影 — 仅用于必要的深度提示 (不用发光)
     ============================================================== */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
}