/* ==========================================================================
   小马上岸 · 官网（营销站）设计令牌（Design Tokens）
   品牌门面 + 获客转化中枢，亮 / 暗双主题
   --------------------------------------------------------------------------
   品牌语义（与学生端四端同源）：
     靛蓝 primary      → 学习 · 专注 · 信任（学生端主线）
     能量橙 accent     → 行动 · CTA · 上岸（全站主 CTA 唯一色）
     成长绿 secondary  → 正确 · 进步 · 掌握
     AI 紫 ai          → AI 能力专属标识
     青绿 teacher      → 老师端角色（官网较少使用）
   营销站差异：
     大留白版式（间距刻度 24 / 48 / 96），字号阶梯 14~72，内容宽度 1200
     画框 1440，Hero 强视觉 + 大幅图表，动效滚动入场 / 数字滚动 / 图表绘制
   ========================================================================== */

:root {
  /* ---------- 品牌主色（学生端 · 靛蓝） ---------- */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-active: #3730A3;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #EEF2FF;
  --color-on-primary-container: #312E81;
  --color-primary-soft: rgba(79, 70, 229, 0.10);

  /* ---------- 能量橙（行动 / CTA / 上岸） ---------- */
  --color-accent: #EA580C;
  --color-accent-hover: #C2410C;
  --color-on-accent: #FFFFFF;
  --color-accent-container: #FFEDD5;
  --color-on-accent-container: #7C2D12;
  --color-accent-soft: rgba(234, 88, 12, 0.10);

  /* ---------- 成长绿（正确 / 进步 / 掌握） ---------- */
  --color-secondary: #16A34A;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #DCFCE7;
  --color-on-secondary-container: #14532D;
  --color-secondary-soft: rgba(22, 163, 74, 0.10);

  /* ---------- AI 紫（AI 能力专属） ---------- */
  --color-ai: #6366F1;
  --color-ai-container: #EEF2FF;
  --color-on-ai-container: #3730A3;
  --color-ai-soft: rgba(99, 102, 241, 0.10);

  /* ---------- 老师端主色（青绿） ---------- */
  --color-teacher: #0D9488;
  --color-teacher-container: #CCFBF1;
  --color-on-teacher-container: #134E4A;

  /* ---------- 渐变 ---------- */
  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  --gradient-accent: linear-gradient(135deg, #EA580C 0%, #F97316 100%);

  /* ---------- 品牌标识（六端数值必须逐字一致，见 ui/README.md §4.4） ---------- */
  --brand-600: #4F46E5;
  --brand-violet: #7C3AED;
  --brand-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --brand-gradient-deep: linear-gradient(135deg, #312E81 0%, #5B21B6 100%);
  --brand-shadow: 0 8px 20px -10px rgba(79, 70, 229, .75);
  --brand-mark-sm: 26px;
  --brand-mark-md: 32px;
  --brand-mark-lg: 40px;
  --brand-mark-xl: 56px;
  --gradient-ai: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A855F7 100%);
  --gradient-cta: linear-gradient(120deg, #4F46E5 0%, #6366F1 52%, #8B5CF6 100%);

  /* ---------- 公考赛道主题色 ---------- */
  --track-gk: #4F46E5;     /* 公考 · 靛蓝 */
  --track-zsb: #0D9488;    /* 省考 · 青绿（变量名沿用历史命名，语义已收敛为公考子考试） */
  --track-ky: #6366F1;     /* 事业单位 · AI 紫 */
  --track-zskz: #EA580C;   /* 选调生 · 能量橙 */

  /* ---------- 表面与文本 ---------- */
  --color-bg: #F5F7FA;
  --color-bg-tint: #EEF2F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F5F9;
  --color-surface-3: #E9EEF5;
  --color-on-surface: #1E1B2E;
  --color-on-surface-variant: #4C4868;
  --color-text-tertiary: #8B86A6;
  --color-outline: #E6E4F0;
  --color-outline-strong: #D6D2E6;

  /* ---------- 图表色板 ---------- */
  --chart-1: #4F46E5;
  --chart-2: #16A34A;
  --chart-3: #EA580C;
  --chart-4: #6366F1;
  --chart-5: #0D9488;
  --chart-6: #8B5CF6;

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-num: "Plus Jakarta Sans", "SF Pro Display", -apple-system, "Segoe UI",
              "PingFang SC", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* ---------- 字号阶梯（营销站，基准 16px） ---------- */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- 间距刻度（大留白核心：24 / 48 / 96） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-24: 96px;

  --gutter: 80px;          /* 1440 画框两侧留白 */
  --section-gap: 96px;     /* 屏与屏之间大留白 */

  /* ---------- 圆角 ---------- */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(30, 27, 46, 0.05);
  --shadow-sm: 0 1px 3px rgba(30, 27, 46, 0.07), 0 1px 2px rgba(30, 27, 46, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(30, 27, 46, 0.12);
  --shadow-lg: 0 12px 40px -12px rgba(30, 27, 46, 0.18);
  --shadow-xl: 0 24px 60px -16px rgba(30, 27, 46, 0.24);
  --shadow-primary: 0 16px 40px -12px rgba(79, 70, 229, 0.45);
  --shadow-accent: 0 16px 40px -12px rgba(234, 88, 12, 0.40);

  /* ---------- 动效 ---------- */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- 布局壳（营销站） ---------- */
  --touch-min: 44px;
  --nav-h: 64px;           /* 顶栏高度 */
  --content-max: 1200px;   /* 内容最大宽度 */

  /* ---------- 层级 ---------- */
  --z-nav: 50;
  --z-toast: 80;
}

/* ==========================================================================
   暗色主题 —— 品牌门面暗色增强氛围
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #818CF8;
  --color-primary-hover: #A5B4FC;
  --color-primary-active: #C7D2FE;
  --color-on-primary: #1E1B4B;
  --color-primary-container: #282566;
  --color-on-primary-container: #E0E7FF;
  --color-primary-soft: rgba(129, 140, 248, 0.16);

  --color-accent: #FB923C;
  --color-accent-hover: #FDBA74;
  --color-on-accent: #431407;
  --color-accent-container: #7C2D12;
  --color-on-accent-container: #FFEDD5;
  --color-accent-soft: rgba(251, 146, 60, 0.16);

  --color-secondary: #4ADE80;
  --color-on-secondary: #052E16;
  --color-secondary-container: #14532D;
  --color-on-secondary-container: #DCFCE7;
  --color-secondary-soft: rgba(74, 222, 128, 0.16);

  --color-ai: #A5B4FC;
  --color-ai-container: #2A2660;
  --color-on-ai-container: #E0E7FF;
  --color-ai-soft: rgba(165, 180, 252, 0.16);

  --color-teacher: #2DD4BF;
  --color-teacher-container: #134E4A;
  --color-on-teacher-container: #CCFBF1;

  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  --gradient-accent: linear-gradient(135deg, #EA580C 0%, #FB923C 100%);
  --gradient-ai: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-cta: linear-gradient(120deg, #6366F1 0%, #8B5CF6 60%, #A78BFA 100%);

  --color-bg: #0B0B14;
  --color-bg-tint: #101020;
  --color-surface: #16161F;
  --color-surface-2: #1E1E2A;
  --color-surface-3: #262634;
  --color-on-surface: #E7E5F2;
  --color-on-surface-variant: #A6A2C0;
  --color-text-tertiary: #6B6486;
  --color-outline: #2A2A3A;
  --color-outline-strong: #3A3A4E;

  --chart-1: #818CF8;
  --chart-2: #4ADE80;
  --chart-3: #FB923C;
  --chart-4: #A5B4FC;
  --chart-5: #2DD4BF;
  --chart-6: #A78BFA;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --shadow-primary: 0 16px 40px -12px rgba(99, 102, 241, 0.5);
  --shadow-accent: 0 16px 40px -12px rgba(251, 146, 60, 0.42);
}

/* ==========================================================================
   全局动效降级 —— 尊重系统「减少动态效果」设置
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}