/* =========================================================
   钢铁私塾 Design Tokens v6.0
   ---------------------------------------------------------
   所有视觉属性通过 CSS 变量定义。
   :root 定义专注主题（经典暖酒红）默认值。
   body.theme-coursera 覆盖为专业主题（Coursera蓝）值。
   组件样式只引用变量，不硬编码颜色/圆角/间距/字号。
   ========================================================= */

:root {
  /* ── 品牌色 - 专注主题（酒红）── */
  --color-brand: #751f24;
  --color-brand-hover: #5a181c;
  --color-brand-active: #4d1418;
  --color-brand-soft: #f1dfdc;
  --color-brand-ring: rgba(117,31,36,.12);
  --color-brand-gradient: linear-gradient(135deg,#751f24,#5a181c);

  /* ── 金色辅助（金属质感）── */
  --color-gold: #a58752;
  --color-gold-hover: #8c7040;
  --color-gold-soft: #ddc99f;

  /* ── 钢灰 ── */
  --color-steel: #879196;
  --color-steel-soft: #d9dfe1;

  /* ── 画布与表面 ── */
  --color-canvas: #f4efe6;
  --color-surface: #fffdf8;
  --color-surface-2: #f8f3ea;
  --color-surface-3: #f1ebe1;

  /* ── 文字 ── */
  --color-ink: #171513;
  --color-body: #3d3833;
  --color-muted: #6f685f;
  --color-subtle: #9c9489;
  --color-on-brand: #ffffff;

  /* ── 边框 ── */
  --color-line: #ddd2c3;
  --color-line-strong: #cbbda8;

  /* ── 语义色 ── */
  --color-success: #55785d;
  --color-success-dark: #2d5035;
  --color-success-soft: #e8eee9;
  --color-warning: #b28b42;
  --color-warning-dark: #744210;
  --color-warning-soft: #f5ebd8;
  --color-error: #9a4b43;
  --color-error-dark: #6b2d28;
  --color-error-soft: #f0dfdc;
  --color-info: #5c6b7a;
  --color-info-dark: #3d4854;
  --color-info-soft: #e2e8ec;

  /* ── 基础色 ── */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-scrim: rgba(0,0,0,.45);

  /* ── 奖牌色 ── */
  --color-gold-medal: linear-gradient(135deg,#f5c842,#d4a017);
  --color-gold-medal-text: #5a3e0a;
  /* ── 奖牌色（双主题通用）── */
  --color-medal-gold: #ffd700;
  --color-medal-gold-dark: #ffb800;
  --color-medal-gold-text: #744210;
  --color-medal-silver: #c0c0c0;
  --color-medal-silver-dark: #a0a0a0;
  --color-medal-silver-text: #4a4a4a;
  --color-medal-bronze: #cd7f32;
  --color-medal-bronze-dark: #b87333;
  --color-medal-bronze-text: #5a3e0a;
  --color-silver-medal: linear-gradient(135deg,#d4d8dc,#a8afb5);
  --color-silver-medal-text: #3a3f45;
  --color-bronze-medal: linear-gradient(135deg,#c98656,#a66b3e);
  --color-bronze-medal-text: #ffffff;

  /* ── 圆角 - 专注主题（温润大圆角）── */
  --radius-none: 0px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;
  /* 语义别名 */
  --radius-card: var(--radius-xl);
  --radius-card-lg: var(--radius-2xl);
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-sm);

  /* ── 边框宽度 ── */
  --border-width-thin: 1px;
  --border-width-medium: 1.5px;
  --border-width-thick: 2px;
  --border-width-focus: 3px;

  /* ── 透明度 ── */
  --opacity-disabled: .5;
  --opacity-secondary: .7;
  --opacity-tertiary: .45;

  /* ── 间距 (4px基准) ── */
  --space-0: 0px;
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── 字号 ── */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 22px;
  --font-3xl: 28px;
  --font-4xl: 36px;
  --font-hero: clamp(36px,5vw,56px);

  /* ── 字重 ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── 字体族 ── */
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Source Sans Pro",sans-serif;
  --font-serif: Georgia,"Songti SC","STSong","SimSun",serif;
  --font-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);

  /* ── 行高 ── */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* ── 阴影 - 专注主题（暖棕调柔和）── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
  --shadow-xl: 0 12px 40px rgba(0,0,0,.12);
  /* 语义别名 */
  --shadow-card: 0 12px 34px rgba(50,39,24,.065);
  --shadow-card-hover: 0 20px 50px rgba(50,39,24,.10);
  --shadow-modal: 0 24px 60px rgba(50,39,24,.12);
  --shadow-button: 0 6px 16px rgba(117,31,36,.18);
  --shadow-button-hover: 0 8px 24px rgba(117,31,36,.25);
  --shadow-dropdown: 0 8px 32px rgba(50,39,24,.08),0 2px 8px rgba(50,39,24,.04);

  /* ── 过渡 ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 400ms cubic-bezier(.4,0,.2,1);

  /* ── 断点（仅供JS参考，CSS用media query）── */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* ── 布局 ── */
  --topbar-height: 64px;
  --content-max: 1280px;
  --content-padding: var(--space-5);
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --input-height: 44px;

  /* ── 毛玻璃效果 ── */
  --glass-bg: rgba(255,253,248,.85);
  --glass-border: rgba(221,210,195,.5);
  --glass-shadow: 0 8px 32px rgba(50,39,24,.06);

  /* ── 骨架屏 ── */
  --color-skeleton-base: var(--color-surface-3);
  --color-skeleton-highlight: color-mix(in srgb,var(--color-surface-3) 60%,var(--color-surface));

  /* ── 焦点环 (统一比例) ── */
  --color-focus-ring: var(--color-brand-ring);

  /* ── Z-index 层级 ── */
  --z-dropdown: 50;
  --z-sticky: 60;
  --z-bottom-tab: 60;
  --z-back-to-top: 80;
  --z-drawer-backdrop: 120;
  --z-drawer: 125;
  --z-sheet: 130;
  --z-modal-backdrop: 180;
  --z-modal: 190;
  --z-toast: 200;
  --z-tooltip: 250;

  /* ══════════════════════════════════════════
     向后兼容映射 - 旧变量名指向新 token
     确保现有组件样式无需修改即可工作
     ══════════════════════════════════════════ */
  --ivory: var(--color-canvas);
  --paper: var(--color-surface);
  --paper-2: var(--color-surface-2);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --muted-light: var(--color-subtle);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --wine: var(--color-brand);
  --wine-dark: var(--color-brand-hover);
  --wine-darker: var(--color-brand-active);
  --wine-soft: var(--color-brand-soft);
  --gold: var(--color-gold);
  --gold-soft: var(--color-gold-soft);
  --steel: var(--color-steel);
  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --red: var(--color-error);
  --red-soft: var(--color-error-soft);
  --shadow: var(--shadow-modal);
  --shadow-soft: var(--shadow-card);
  --shadow-hover: var(--shadow-card-hover);
  --shadow-elevated: var(--shadow-modal);
  --radius: var(--radius-card);
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  /* 补充缺失的旧变量映射 */
  --color-caption: var(--color-muted);
  --shadow-overlay: var(--color-scrim);
  --font-xxs: 10px;
}

/* =========================================================
   专业主题覆盖 (Coursera蓝)
   只覆盖与专注主题不同的变量值
   ========================================================= */
body.theme-coursera {
  /* ── 品牌色 - 专业主题（Coursera蓝）── */
  --color-brand: #0056d2;
  --color-brand-hover: #0044a8;
  --color-brand-active: #003380;
  --color-brand-soft: #eff6ff;
  --color-brand-ring: rgba(0,86,210,.15);
  --color-brand-gradient: linear-gradient(135deg,#0056d2,#0044a8);

  /* ── 辅助紫 ── */
  --color-gold: #5e6ad2;
  --color-gold-hover: #4c56b8;
  --color-gold-soft: #eef0ff;

  /* ── 钢灰 ── */
  --color-steel: #6a6f73;
  --color-steel-soft: #e4e8ed;

  /* ── 画布与表面 ── */
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fa;
  --color-surface-3: #f1f3f4;

  /* ── 文字 ── */
  --color-ink: #2d2f31;
  --color-body: #3e4143;
  --color-muted: #6a6f73;
  --color-subtle: #9da3a8;

  /* ── 边框 ── */
  --color-line: #e4e8ed;
  --color-line-strong: #d1d7dc;

  /* ── 语义色（Google Material）── */
  --color-success: #188038;
  --color-success-dark: #0d652d;
  --color-success-soft: #e6f4ea;
  --color-warning: #b7791f;
  --color-warning-dark: #92400e;
  --color-warning-soft: #fef7e0;
  --color-error: #d13212;
  --color-error-dark: #a52710;
  --color-error-soft: #fde8e8;
  --color-info: #1a73e8;
  --color-info-dark: #1557b0;
  --color-info-soft: #e8f0fe;

  /* ── 遮罩 ── */
  --color-scrim: rgba(0,0,0,.5);

  /* ── 奖牌色（保持跨主题一致）── */
  /* 奖牌色不变，金属色是通用的 */

  /* ── 圆角 - 专业主题（精确小圆角）── */
  --radius-card: var(--radius-md);
  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-badge: var(--radius-xs);

  /* ── 字体 - 专业主题全用无衬线 ── */
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* ── 阴影 - 专业主题（冷灰调，克制使用）── */
  --shadow-card: 0 2px 8px rgba(0,0,0,.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.10);
  --shadow-modal: 0 20px 60px rgba(0,0,0,.10),0 8px 24px rgba(0,0,0,.05);
  --shadow-button: 0 2px 8px rgba(0,86,210,.22);
  --shadow-button-hover: 0 6px 20px rgba(0,86,210,.30);
  --shadow-dropdown: 0 8px 32px rgba(0,0,0,.06);

  /* ── 毛玻璃效果（专业主题）── */
  --glass-bg: rgba(255,255,255,.75);
  --glass-border: rgba(255,255,255,.2);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.06);

  /* ── 向后兼容映射（专业主题）── */
  --ivory: var(--color-canvas);
  --paper: var(--color-surface);
  --paper-2: var(--color-surface-2);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --muted-light: var(--color-subtle);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --wine: var(--color-brand);
  --wine-dark: var(--color-brand-hover);
  --wine-darker: var(--color-brand-active);
  --wine-soft: var(--color-brand-soft);
  --gold: var(--color-gold);
  --gold-soft: var(--color-gold-soft);
  --steel: var(--color-steel);
  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --red: var(--color-error);
  --red-soft: var(--color-error-soft);
  --shadow: var(--shadow-modal);
  --shadow-soft: var(--shadow-card);
  --shadow-hover: var(--shadow-card-hover);
  --shadow-elevated: var(--shadow-modal);
  --radius: var(--radius-card);
  --serif: var(--font-sans);
  --sans: var(--font-sans);
}

/* =========================================================
   现代深色主题 (Converge Enter 风格)
   近黑背景、Instrument Sans字体、极简边框、高对比度
   ========================================================= */
body.theme-modern-dark {
  /* ── 品牌色 - 现代深色（高饱和亮酒红，保证深色背景上文字可读性）── */
  --color-brand: #e05560;
  --color-brand-hover: #ed6a74;
  --color-brand-active: #c94450;
  --color-brand-soft: rgba(224,85,96,.15);
  --color-brand-ring: rgba(224,85,96,.3);
  --color-brand-gradient: linear-gradient(135deg,#e05560,#b83842);

  /* ── 金色辅助（深色模式下更亮的金属色）── */
  --color-gold: #d4af37;
  --color-gold-hover: #e4c04a;
  --color-gold-soft: rgba(212,175,55,.15);

  /* ── 钢灰（冷调钢色）── */
  --color-steel: #8b949e;
  --color-steel-soft: #21262d;

  /* ── 画布与表面 - 近黑Converge风格 ── */
  --color-canvas: #0a0a0b;
  --color-surface: #111113;
  --color-surface-2: #161618;
  --color-surface-3: #1c1c1f;

  /* ── 文字 - 高对比度白/灰 ── */
  --color-ink: #f0f0f2;
  --color-body: #c9c9cd;
  --color-muted: #8b8b92;
  --color-subtle: #5e5e66;
  --color-on-brand: #ffffff;

  /* ── 边框 - 微妙半透明白 ── */
  --color-line: rgba(255,255,255,.08);
  --color-line-strong: rgba(255,255,255,.14);

  /* ── 语义色（深色模式适配）── */
  --color-success: #4ade80;
  --color-success-dark: #22c55e;
  --color-success-soft: rgba(74,222,128,.12);
  --color-warning: #fbbf24;
  --color-warning-dark: #f59e0b;
  --color-warning-soft: rgba(251,191,36,.12);
  --color-error: #f87171;
  --color-error-dark: #ef4444;
  --color-error-soft: rgba(248,113,113,.12);
  --color-info: #60a5fa;
  --color-info-dark: #3b82f6;
  --color-info-soft: rgba(96,165,250,.12);

  /* ── 基础色 ── */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-scrim: rgba(0,0,0,.7);

  /* ── 奖牌色（深色模式微调）── */
  --color-gold-medal-text: #fbbf24;
  --color-medal-gold: #ffd700;
  --color-medal-gold-dark: #daa520;
  --color-medal-gold-text: #1a1a0a;
  --color-medal-silver: #c0c0c0;
  --color-medal-silver-dark: #909090;
  --color-medal-silver-text: #1a1a1a;
  --color-medal-bronze: #cd7f32;
  --color-medal-bronze-dark: #a0522d;
  --color-medal-bronze-text: #ffffff;

  /* ── 圆角 - 现代极简（Converge风格小圆角）── */
  --radius-card: var(--radius-md);
  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-badge: var(--radius-xs);

  /* ── 字体族 - Instrument Sans 现代几何无衬线，中文字体优先fallback ── */
  --font-sans: "Instrument Sans","PingFang SC","Microsoft YaHei","Segoe UI","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif: "Instrument Sans","PingFang SC","Microsoft YaHei","Songti SC","STSong","SimSun",serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* ── 字号（现代主题大标题更紧凑）── */
  --font-hero: clamp(32px,5vw,56px);

  /* ── 阴影 - 深色主题用发光/内阴影代替投影 ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  --shadow-xl: 0 12px 48px rgba(0,0,0,.6);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.4);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.06) inset,0 16px 48px rgba(0,0,0,.5);
  --shadow-modal: 0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  --shadow-button: 0 2px 8px rgba(224,85,96,.3);
  --shadow-button-hover: 0 6px 20px rgba(224,85,96,.4);
  --shadow-dropdown: 0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);

  /* ── 毛玻璃效果（深色模式）── */
  --glass-bg: rgba(17,17,19,.75);
  --glass-border: rgba(255,255,255,.08);
  --glass-shadow: 0 16px 48px rgba(0,0,0,.5);

  /* ── 骨架屏（深色模式）── */
  --color-skeleton-base: #1c1c1f;
  --color-skeleton-highlight: #26262a;

  /* ── 焦点环 ── */
  --color-focus-ring: var(--color-brand-ring);

  /* ── 向后兼容映射（现代深色主题）── */
  --ivory: var(--color-canvas);
  --paper: var(--color-surface);
  --paper-2: var(--color-surface-2);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --muted-light: var(--color-subtle);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --wine: var(--color-brand);
  --wine-dark: var(--color-brand-hover);
  --wine-darker: var(--color-brand-active);
  --wine-soft: var(--color-brand-soft);
  --gold: var(--color-gold);
  --gold-soft: var(--color-gold-soft);
  --steel: var(--color-steel);
  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --red: var(--color-error);
  --red-soft: var(--color-error-soft);
  --shadow: var(--shadow-modal);
  --shadow-soft: var(--shadow-card);
  --shadow-hover: var(--shadow-card-hover);
  --shadow-elevated: var(--shadow-modal);
  --radius: var(--radius-card);
  --serif: var(--font-sans);
  --sans: var(--font-sans);
  --color-caption: var(--color-muted);
  --shadow-overlay: var(--color-scrim);
}