/* ==========================================================================
   14to17 · 设计令牌
   —— 颜色的唯一来源。任何地方要用色，只允许引用这里的变量，
      不允许在页面里写裸色值（否则暗色模式与对比度校验必然失控）。
      每个文字色都标注了在对应底上的对比度，均达到 WCAG AA（正文 ≥4.5:1）。
   ========================================================================== */
:root {
  /* ---------- 品牌色（靛紫：创作者 / 表达） ---------- */
  --brand-50:  #F2F0FE;
  --brand-100: #E4E0FD;
  --brand-200: #CCC5FB;
  --brand-300: #A99EF6;
  --brand-500: #6C5CE7;
  --brand-600: #5B4BE8;   /* 主色 */
  --brand-700: #4636C9;   /* 白底 8.1:1 ✅ 用于正文链接 */
  --brand-800: #37289E;

  /* ---------- 强调色（暖橙：行动 / 提醒） ---------- */
  --accent-50:  #FFF5EF;
  --accent-100: #FFE6D5;
  --accent-500: #FF7A45;  /* 仅作装饰与大色块，白字对比不足 2.6:1，⚠️ 不承载文字 */
  --accent-600: #E2571C;
  --accent-700: #C2410C;  /* 白底 6.0:1 ✅ 用于正文与按钮 */

  /* ---------- 语义色 ---------- */
  --success-50:  #E9F9F2;
  --success-100: #C9F0DF;
  --success-600: #0E9F6E;
  --success-700: #06694A;   /* 白底 7.2:1 ✅ */
  --warning-50:  #FFFBEB;
  --warning-100: #FDF0C8;
  --warning-600: #B45309;   /* 白底 5.3:1 ✅ */
  --warning-700: #92400E;
  --danger-50:   #FEF2F2;
  --danger-100:  #FDE0E0;
  --danger-600:  #DC2626;   /* 白底 4.8:1 ✅ */
  --danger-700:  #B01818;   /* 白底 6.6:1 ✅ */
  --info-50:     #EFF6FF;
  --info-600:    #2563EB;
  --info-700:    #1D4ED8;   /* 白底 6.3:1 ✅ */

  /* ---------- 中性色 ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F7F8FC;
  --n-100: #F0F2F8;
  --n-200: #E3E7F0;
  --n-300: #CBD3E1;
  --n-400: #94A0B8;
  --n-500: #5F6B85;   /* 白底 5.4:1 ✅ 最小可读的灰 */
  --n-600: #495468;   /* 白底 7.4:1 ✅ */
  --n-700: #333C4E;   /* 白底 10.8:1 ✅ */
  --n-800: #1F2637;
  --n-900: #101625;   /* 白底 16.9:1 ✅ */

  /* ---------- 语义化映射 ---------- */
  --bg-page:        var(--n-50);
  --bg-surface:     var(--n-0);
  --bg-raised:      var(--n-0);
  --bg-subtle:      var(--n-100);
  --bg-inverse:     var(--n-900);

  --text-primary:   var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary:  var(--n-500);
  --text-inverse:   var(--n-0);

  --border-subtle:  var(--n-200);
  --border-strong:  var(--n-300);

  /* ---------- 字号（1.2 左右等比） ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   21px;
  --fs-2xl:  26px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-body:  1.7;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---------- 间距（4px 基准，8 点节奏） ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- 圆角 ---------- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   13px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-full: 999px;

  /* ---------- 阴影（克制，靠层次而非重影） ---------- */
  --sh-xs: 0 1px 2px rgba(16, 22, 37, .05);
  --sh-sm: 0 2px 6px rgba(16, 22, 37, .06), 0 1px 2px rgba(16, 22, 37, .04);
  --sh-md: 0 8px 20px -6px rgba(16, 22, 37, .12), 0 2px 6px rgba(16, 22, 37, .05);
  --sh-lg: 0 20px 44px -14px rgba(16, 22, 37, .20), 0 6px 16px rgba(16, 22, 37, .06);
  --sh-focus: 0 0 0 3px rgba(91, 75, 232, .28);

  /* ---------- 动效 ---------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* ---------- 布局 ---------- */
  --container: 1180px;
  --header-h: 64px;
}

/* ---------- 暗色模式 ----------
   只换语义层，不动色板本身 —— 这样组件样式一行都不用改。 */
[data-theme="dark"] {
  --bg-page:    #0B0F1A;
  --bg-surface: #141A28;
  --bg-raised:  #1A2233;
  --bg-subtle:  #1E2637;
  --bg-inverse: var(--n-50);

  --text-primary:   #EDF0F7;
  --text-secondary: #A9B4C9;
  --text-tertiary:  #8593AC;
  --text-inverse:   #101625;

  --border-subtle: #28303F;
  --border-strong: #3A445A;

  --brand-50:  #1B1C3A;
  --brand-100: #24264C;
  --brand-200: #33367A;
  --brand-700: #A99EF6;
  --brand-800: #CCC5FB;

  --accent-50:  #2B1A12;
  --accent-100: #3E2417;
  --accent-700: #FF9A6E;

  --success-50:  #0E2A20;
  --success-700: #5BD3A0;
  --warning-50:  #2A2110;
  --warning-100: #3A2E15;
  --warning-600: #F0B429;
  --warning-700: #F5C65A;
  --danger-50:   #2E1414;
  --danger-100:  #3C1A1A;
  --danger-600:  #F26D6D;
  --danger-700:  #F79A9A;
  --info-50:     #0E1E36;
  --info-700:    #7CA8F5;

  --n-0:   #141A28;
  --n-25:  #171E2C;
  --n-50:  #1B2331;
  --n-100: #222B3B;
  --n-200: #2B3446;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .45);
  --sh-md: 0 8px 20px -6px rgba(0, 0, 0, .55);
  --sh-lg: 0 20px 44px -14px rgba(0, 0, 0, .65);
}

/* 降级：尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}