/* ==========================================================================
   小马上岸 · 移动 App 端 设计令牌（Design Tokens）
   基于 Material Design 3 语义色体系构建，亮 / 暗双主题
   --------------------------------------------------------------------------
   品牌语义：
     靛蓝 primary      → 学习 · 专注 · 信任
     成长绿 secondary  → 正确 · 进度 · 掌握
     能量橙 accent     → 行动 · CTA · 上岸
     AI 紫 ai          → AI 能力专属标识
   ========================================================================== */

: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);

  /* ---------- 成长绿（正确 / 进度 / 掌握） ---------- */
  --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);

  /* ---------- 能量橙（行动 / CTA / 上岸） ---------- */
  --color-accent: #EA580C;
  --color-on-accent: #FFFFFF;
  --color-accent-container: #FFEDD5;
  --color-on-accent-container: #7C2D12;
  --color-accent-soft: rgba(234, 88, 12, 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, #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;

  /* ---------- 语义状态色 ---------- */
  --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: #F8FAFC;
  --color-bg-tint: #EEF1F8;
  --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: #4F46E5;
  --chart-2: #16A34A;
  --chart-3: #EA580C;
  --chart-4: #0284C7;
  --chart-5: #D97706;
  --chart-6: #DB2777;

  /* ---------- 字体 ---------- */
  --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;

  /* ---------- 字号阶梯 ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;

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

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

  /* ---------- 间距（8dp 节奏） ---------- */
  --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: 16px;          /* 页面左右安全内边距 */
  --section-gap: 20px;     /* 模块间竖向间距 */

  /* ---------- 圆角 ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --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(79, 70, 229, 0.45);
  --shadow-accent: 0 8px 20px -6px rgba(234, 88, 12, 0.42);
  /* 轻拟物：内外双层（成就勋章 / 打卡元素） */
  --shadow-clay: 0 6px 14px -4px rgba(79, 70, 229, 0.28),
                 inset 0 -3px 6px rgba(49, 46, 129, 0.18),
                 inset 0 3px 6px rgba(255, 255, 255, 0.55);

  /* ---------- 动效 ---------- */
  --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: 44px;
  --frame-w: 375px;
  --frame-h: 812px;
  --screen-radius: 34px;   /* 屏幕内圆角 = 画框 44px − 边框 10px */
  --statusbar-h: 44px;
  --navbar-h: 44px;
  --tabbar-h: 58px;
  --safe-top: 20px;    /* 顶部安全区（iOS 灵动岛 / Android 打孔屏） */
  --safe-bottom: 16px; /* 底部安全区（Home Indicator / 手势条） */

  /* ---------- 层级 ---------- */
  --z-navbar: 30;
  --z-tabbar: 40;
  --z-sheet: 60;
  --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-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-accent: #FB923C;
  --color-on-accent: #431407;
  --color-accent-container: #7C2D12;
  --color-on-accent-container: #FFEDD5;
  --color-accent-soft: rgba(251, 146, 60, 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, #6366F1 0%, #818CF8 100%);
  --gradient-accent: linear-gradient(135deg, #EA580C 0%, #FB923C 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: #818CF8;
  --chart-2: #4ADE80;
  --chart-3: #FB923C;
  --chart-4: #38BDF8;
  --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(99, 102, 241, 0.5);
  --shadow-accent: 0 8px 20px -6px rgba(251, 146, 60, 0.42);
  --shadow-clay: 0 6px 14px -4px rgba(0, 0, 0, 0.5),
                 inset 0 -3px 6px rgba(0, 0, 0, 0.35),
                 inset 0 3px 6px rgba(255, 255, 255, 0.07);
}

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