/* ==========================================================================
   小马上岸 · Web 网页版 设计令牌（Design Tokens）
   基于 Material Design 3 语义色体系，亮 / 暗双主题
   --------------------------------------------------------------------------
   品牌语义（对齐慕课网 imooc 门户视觉）：
     慕课红 primary    → 品牌主线 · 导航高亮 · 主 CTA
     宝蓝   secondary  → 标签 · 进度 · 正确
     深红   price      → 价格 · 促销 · 紧迫感（专属语义）
     深红   accent     → 行动 · 限时 CTA · 上岸
     AI 紫 ai          → AI 能力专属标识
     青绿 teacher      → 老师端角色主线（备课 / 内容 / 教务）
   桌面端差异：标准密度间距刻度 8 / 12 / 16 / 20 / 24，表格行高 48，画框 1440×900
    ========================================================================== */

   :root {
   /* ---------- 品牌主色（慕课红） ---------- */
   --color-primary: #F20D0D;
   --color-primary-hover: #C20A0A;
   --color-primary-active: #A8071A;
   --color-on-primary: #FFFFFF;
   --color-primary-container: #FCCFCF;
   --color-on-primary-container: #7A1010;
   --color-primary-soft: rgba(242, 13, 13, 0.10);

  /* ---------- 老师端主色（青绿） ---------- */
  --color-teacher: #0D9488;
  --color-teacher-hover: #0F766E;
  --color-teacher-active: #115E59;
  --color-on-teacher: #FFFFFF;
  --color-teacher-container: #CCFBF1;
  --color-on-teacher-container: #134E4A;
  --color-teacher-soft: rgba(13, 148, 136, 0.10);
  --gradient-teacher: linear-gradient(135deg, #0D9488 0%, #2DD4BF 100%);

  /* ---------- 宝蓝（标签 / 进度 / 正确） ---------- */
  --color-secondary: #1677FF;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #E6F0FF;
  --color-on-secondary-container: #0B2E6B;
  --color-secondary-soft: rgba(22, 119, 255, 0.10);

  /* ---------- 深红（价格 / 促销，专属语义 · 比主色更深） ---------- */
  --color-price: #C20A0A;
  --color-price-hover: #A8071A;
  --color-price-soft: rgba(194, 10, 10, 0.10);

  /* ---------- 深红（行动 / 限时 CTA / 上岸） ---------- */
  --color-accent: #C20A0A;
  --color-on-accent: #FFFFFF;
  --color-accent-hover: #A8071A;
  --color-accent-container: #FBDDDD;
  --color-on-accent-container: #7A1010;
  --color-accent-soft: rgba(194, 10, 10, 0.10);

  /* ---------- AI 紫（AI 能力专属） ---------- */
  --color-ai: #6366F1;
  --color-ai-container: #EEF2FF;
  --color-ai-soft: rgba(99, 102, 241, 0.10);
  --gradient-ai: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A855F7 100%);
  --gradient-primary: linear-gradient(135deg, #F20D0D 0%, #F53D3D 100%);
  --gradient-price: linear-gradient(135deg, #A8071A 0%, #F20D0D 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-accent: linear-gradient(135deg, #C20A0A 0%, #F53D3D 100%);

  /* ---------- 语义状态色 ---------- */
  --color-error: #DC2626;
  --color-on-error: #FFFFFF;
  --color-error-container: #FEE2E2;
  --color-on-error-container: #7F1D1D;
  --color-warning: #D97706;
  --color-warning-container: #FEF3C7;
  --color-on-warning-container: #78350F;
  --color-info: #0284C7;
  --color-info-container: #E0F2FE;
  --color-on-info-container: #075985;

  /* ---------- 表面与文本 ---------- */
  --color-bg: #F6F7F9;
  --color-bg-tint: #EEF1F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F5F9;
  --color-surface-3: #E9EEF5;
  --color-on-surface: #0F172A;
  --color-on-surface-variant: #475569;
  --color-text-tertiary: #94A3B8;
  --color-outline: #E2E8F0;
  --color-outline-strong: #CBD5E1;

  /* ---------- 图表色板 ---------- */
  --chart-1: #F20D0D;
  --chart-2: #1677FF;
  --chart-3: #FF7A45;
  --chart-4: #7C3AED;
  --chart-5: #D97706;
  --chart-6: #DB2777;

  /* ---------- 字体 ---------- */
  /* 纯本地字体栈，与 app / admin / desktop / miniprogram / website 五端逐字一致。
     原实现用 @import 拉取 Google Fonts：CSS @import 属于渲染阻塞资源，
     一旦外网不可达（离线、被墙、无代理），整站会一直停在加载中，故移除。 */
  --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;

  /* ---------- 字号阶梯（桌面端标准密度，基准 13px） ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-30: 30px;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

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

  /* ---------- 间距（标准密度 8 / 12 / 16 / 20 / 24 节奏） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --gutter: 20px;          /* 页面左右安全内边距 */
  --section-gap: 20px;     /* 模块间竖向间距（标准密度） */

  /* ---------- 圆角 ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;
  --radius-full: 999px;

  /* ---------- 阴影（MD3 高度语义） ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.09), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 56px -12px rgba(15, 23, 42, 0.22);
  --shadow-primary: 0 8px 20px -6px rgba(242, 13, 13, 0.42);
  --shadow-accent: 0 8px 20px -6px rgba(194, 10, 10, 0.42);
  --shadow-teacher: 0 8px 20px -6px rgba(13, 148, 136, 0.42);

  /* ---------- 动效 ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --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: 36px;
  --titlebar-h: 52px;      /* 顶部标题栏（品牌 + 面包屑）高度 */
  --sidebar-w: 224px;      /* 一级导航宽度 */
  --sidebar-w-collapsed: 64px; /* 折叠后宽度 */
  --content-max: 1560px;   /* 大屏内容最大宽度 */
  --table-row: 48px;       /* 标准密度表格行高 */

  /* ---------- 层级 ---------- */
  --z-titlebar: 40;
  --z-sidebar: 30;
  --z-sheet: 60;
  --z-toast: 80;
}

/* ==========================================================================
   暗色主题 —— 晚间学习 / 夜间办公场景，独立校准对比度
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #FF6B6B;
  --color-primary-hover: #FF8A8A;
  --color-primary-active: #FFA3A3;
  --color-on-primary: #4A0A0A;
  --color-primary-container: #5C1414;
  --color-on-primary-container: #FFD9D9;
  --color-primary-soft: rgba(255, 107, 107, 0.16);

  --color-teacher: #2DD4BF;
  --color-teacher-hover: #5EEAD4;
  --color-teacher-active: #99F6E4;
  --color-on-teacher: #042F2E;
  --color-teacher-container: #134E4A;
  --color-on-teacher-container: #CCFBF1;
  --color-teacher-soft: rgba(45, 212, 191, 0.16);
  --gradient-teacher: linear-gradient(135deg, #0D9488 0%, #2DD4BF 100%);

  --color-secondary: #60A5FA;
  --color-on-secondary: #06214A;
  --color-secondary-container: #103A73;
  --color-on-secondary-container: #DBEAFE;
  --color-secondary-soft: rgba(96, 165, 250, 0.16);

  --color-price: #FF7A7A;
  --color-price-hover: #FFA0A0;
  --color-price-soft: rgba(255, 122, 122, 0.16);

  --color-accent: #FF7A7A;
  --color-on-accent: #4A0A0A;
  --color-accent-hover: #FFA0A0;
  --color-accent-container: #5C1414;
  --color-on-accent-container: #FFE0E0;
  --color-accent-soft: rgba(255, 122, 122, 0.16);

  --color-ai: #A5B4FC;
  --color-ai-container: #2A2660;
  --color-ai-soft: rgba(165, 180, 252, 0.16);
  --gradient-ai: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-primary: linear-gradient(135deg, #F20D0D 0%, #FF6B6B 100%);
  --gradient-price: linear-gradient(135deg, #C20A0A 0%, #FF7A7A 100%);
  --gradient-accent: linear-gradient(135deg, #C20A0A 0%, #FF7A7A 100%);

  --color-error: #F87171;
  --color-on-error: #450A0A;
  --color-error-container: #7F1D1D;
  --color-on-error-container: #FEE2E2;
  --color-warning: #FBBF24;
  --color-warning-container: #78350F;
  --color-on-warning-container: #FEF3C7;
  --color-info: #38BDF8;
  --color-info-container: #075985;
  --color-on-info-container: #E0F2FE;

  --color-bg: #0B1020;
  --color-bg-tint: #0F1526;
  --color-surface: #161E2E;
  --color-surface-2: #1E293B;
  --color-surface-3: #26334A;
  --color-on-surface: #F1F5F9;
  --color-on-surface-variant: #A9B6C9;
  --color-text-tertiary: #6B7A90;
  --color-outline: #2A3648;
  --color-outline-strong: #3B4A63;

  --chart-1: #FF6B6B;
  --chart-2: #60A5FA;
  --chart-3: #FFB088;
  --chart-4: #A78BFA;
  --chart-5: #FBBF24;
  --chart-6: #F472B6;

  --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 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.7);
  --shadow-primary: 0 8px 20px -6px rgba(242, 13, 13, 0.45);
  --shadow-accent: 0 8px 20px -6px rgba(194, 10, 10, 0.42);
  --shadow-teacher: 0 8px 20px -6px rgba(45, 212, 191, 0.4);
}

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