/* ============================================================
   书路教育官网 v4 · Design Tokens（Organic 风格 · 莫兰迪蓝 × 红 · 中性浅灰底 · 明暗双模式）
   来源：spec-v4-organic-morandi.md §2、§2.5、§3、§4
   规则：只有两种主题色（书先生蓝 / 路夫人红），其余全部是无冷暖倾向的中性色；
         组件只引用变量，明暗切换只改变量值（<html data-theme="dark">）
   ============================================================ */

:root {
  color-scheme: light;

  /* —— 书先生蓝 · 主色：主按钮、标签、AI 产品、首屏第一行、Logo 英文 —— */
  --color-accent-100: #edf1f4;
  --color-accent-200: #d9e1e8;
  --color-accent-300: #bccad6;
  --color-accent-400: #8fa3b4;
  --color-accent-500: #5a7389;
  --color-accent-600: #4f677c;
  --color-accent-700: #42566a;
  --color-accent-800: #354657;
  --color-accent-900: #273441;
  --color-accent: var(--color-accent-500);

  /* —— 路夫人红 · 第二主题色：课程产品、首屏第二行、Logo 中文、点缀 —— */
  --color-accent-2-100: #f6ebe9;
  --color-accent-2-200: #ecd6d2;
  --color-accent-2-300: #ddb9b2;
  --color-accent-2-400: #c58a80;
  --color-accent-2-500: #a55d53;
  --color-accent-2-600: #8f4d44;
  --color-accent-2-700: #7a4038;
  --color-accent-2-800: #62332d;
  --color-accent-2-900: #4a2621;
  --color-accent-2: var(--color-accent-2-500);

  /* —— 中性色（选定方案：中性浅灰）—— */
  --color-bg: #f2f2f1;              /* 页面底色（首屏、用户评价）；产品详情面板、选中的目录项 */
  --color-bg-rgb: 242, 242, 241;    /* 供半透明使用（Header 胶囊条、影片说明胶囊） */
  --color-card: #fafafa;            /* 产品版块通栏底色、评价卡片 */
  --color-surface: #e5e5e3;         /* 关于我们通栏底色、次按钮、hover 胶囊、明暗切换按钮 */
  --color-surface-strong: #d8d8d6;  /* 次按钮 hover */
  --color-text: #201e1d;            /* 正文 */
  --color-neutral-700: #5f5a55;     /* 次要文字 */
  --color-band: #201e1d;            /* 联系我们通栏底色 */
  --color-onband: #f2f2f1;          /* 联系我们区文字（= bg） */
  --color-onband-rgb: 242, 242, 241;
  --color-logo-chip: transparent;   /* Logo 图形底衬 */
  --color-on-accent: var(--color-bg); /* 放在 500 主色上的文字 */

  /* —— 字体：英文/数字用 Caprasimo / Figtree，中文由系统字体显示 —— */
  --font-heading: 'Caprasimo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans SC', sans-serif;
  --font-body: 'Figtree', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans SC', sans-serif;

  /* —— 字号 —— */
  --fs-h1: clamp(40px, 5.4vw, 76px);
  --fs-h2: clamp(40px, 5vw, 66px);
  --fs-h3: clamp(26px, 2.6vw, 34px);
  --fs-lead: clamp(17px, 1.6vw, 20px);
  --fs-body: 16px;
  --fs-body-lg: 17px;
  --fs-small: 13px;

  /* —— 形状 —— */
  --radius-pill: 999px;                       /* 按钮、标签、导航条、目录项 */
  --radius-card: 36px;                        /* 评价卡片 */
  --radius-panel: 40px;                       /* 产品详情面板 */
  --radius-media: 48px 48px 160px 48px;       /* 影片框：右下角特别圆 */
  --radius-image: 30px;                       /* 面板内嵌产品图 */

  /* —— 阴影 —— */
  --shadow-md: 0 3px 10px rgba(46, 43, 37, .16);
  --shadow-lg: 0 12px 32px rgba(46, 43, 37, .22);

  /* —— 间距 —— */
  --pad-y: clamp(64px, 9vw, 120px);           /* 版块上下 */
  --pad-x: clamp(20px, 5vw, 72px);            /* 版块左右 */
  --content-max: 1200px;
  --avatar: clamp(150px, 18vw, 220px);

  /* —— 动效 —— */
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: .35s;
  --theme-dur: .4s;                           /* 明暗切换时背景、文字色过渡 */
}

/* ============================================================
   备选底色（spec §2，仅浅色模式）。评审时在 <html> 上加 data-bg，或在地址后加 ?bg=white 等
   ============================================================ */
:root[data-bg="white"] { --color-bg: #ffffff; --color-bg-rgb: 255, 255, 255; --color-card: #f6f6f5; --color-surface: #eeedeb; --color-surface-strong: #e0dfdc; --color-onband: #ffffff; --color-onband-rgb: 255, 255, 255; }
:root[data-bg="warm"]  { --color-bg: #f4f2ee; --color-bg-rgb: 244, 242, 238; --color-card: #faf9f7; --color-surface: #e8e4de; --color-surface-strong: #dbd6ce; --color-onband: #f4f2ee; --color-onband-rgb: 244, 242, 238; }
:root[data-bg="mist"]  { --color-bg: #f1f3f5; --color-bg-rgb: 241, 243, 245; --color-card: #f9fafb; --color-surface: #e2e7ec; --color-surface-strong: #d3dae1; --color-onband: #f1f3f5; --color-onband-rgb: 241, 243, 245; }
:root[data-bg="rose"]  { --color-bg: #f7f2f0; --color-bg-rgb: 247, 242, 240; --color-card: #fcf9f8; --color-surface: #ede2de; --color-surface-strong: #e1d2cc; --color-onband: #f7f2f0; --color-onband-rgb: 247, 242, 240; }

/* ============================================================
   暗色模式（spec §2.5）
   主题色色阶反转：浅档在深底上作文字，深档作底色；组件写法不变。
   同一组变量写两遍：一遍给手动切换（data-theme="dark"），
   一遍给「未设置时跟随系统」（prefers-color-scheme: dark 且没有显式选 light）。
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-accent-100: #263039; --color-accent-200: #3b4a5a; --color-accent-300: #566c81; --color-accent-400: #6f879e;
  --color-accent-500: #86a0b8; --color-accent-600: #9cb4ca; --color-accent-700: #b3c6d8; --color-accent-800: #d5e0eb; --color-accent-900: #eef3f8;
  --color-accent-2-100: #3a2522; --color-accent-2-200: #5a3833; --color-accent-2-300: #84524b; --color-accent-2-400: #a76a61;
  --color-accent-2-500: #c4837a; --color-accent-2-600: #d49b91; --color-accent-2-700: #e2b5ad; --color-accent-2-800: #f0d6d1; --color-accent-2-900: #f9eeec;
  --color-bg: #18191b; --color-bg-rgb: 24, 25, 27;
  --color-card: #202124;
  --color-surface: #2a2b2e; --color-surface-strong: #36373b;
  --color-text: #ecebea;
  --color-neutral-700: #a8a6a3;
  --color-band: #0f1011;
  --color-onband: #ecebea; --color-onband-rgb: 236, 235, 234;
  --color-logo-chip: #ecebea;
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-accent-100: #263039; --color-accent-200: #3b4a5a; --color-accent-300: #566c81; --color-accent-400: #6f879e;
    --color-accent-500: #86a0b8; --color-accent-600: #9cb4ca; --color-accent-700: #b3c6d8; --color-accent-800: #d5e0eb; --color-accent-900: #eef3f8;
    --color-accent-2-100: #3a2522; --color-accent-2-200: #5a3833; --color-accent-2-300: #84524b; --color-accent-2-400: #a76a61;
    --color-accent-2-500: #c4837a; --color-accent-2-600: #d49b91; --color-accent-2-700: #e2b5ad; --color-accent-2-800: #f0d6d1; --color-accent-2-900: #f9eeec;
    --color-bg: #18191b; --color-bg-rgb: 24, 25, 27;
    --color-card: #202124;
    --color-surface: #2a2b2e; --color-surface-strong: #36373b;
    --color-text: #ecebea;
    --color-neutral-700: #a8a6a3;
    --color-band: #0f1011;
    --color-onband: #ecebea; --color-onband-rgb: 236, 235, 234;
    --color-logo-chip: #ecebea;
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .55);
  }
}