/* ============================================================
   大院儿二胡陪练 · Web 设计 Token（唯一真相源）
   对齐 App 设计系统 SSOT: docs/design-philosophy-warm-clarity.md
   主色唯一：赤陶红；禁用第二主色；禁用 emoji
   ============================================================ */
/* —— 国风衬线标题字体：本地托管（将 NotoSerifSC woff2 放入 assets/fonts/ 即生效） —— */
@font-face {
  font-family: "Noto Serif SC";
  src: url("../fonts/NotoSerifSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("../fonts/NotoSerifSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* —— 色彩 —— */
  --primary: #B84E34;          /* 赤陶红：唯一主色（按钮/强调/选中） */
  --primary-dark: #7A3325;     /* 标题/按压态 */
  --primary-light: #C86A50;    /* 次级强调/hover */
  --background: #F5EFE4;        /* 全局暖白背景 */
  --white: #FFFFFF;            /* 卡片/表面 */
  --success: #3FA06A;          /* 语义胜利绿：仅"做对/完成"成就时刻 */
  --success-dark: #27744C;     /* 浅底上的胜利绿文字（保 AA） */
  --success-light: #E5F3EA;    /* 胜利绿浅底 */
  --text: #2A2A2A;             /* 主文字 11.8:1 */
  --text-light: #5A5A5A;       /* 次要文字 6.3:1 */
  --gray: #7A7A7A;             /* 辅助文字（暖白底约 3.7:1，仅非关键） */
  --gray-light: #B0A99A;       /* 边框/分割线 */
  --divider: #D9CEC5;          /* 暖色分割线 */
  --gold: #C89B4C;             /* 会员价卡标题金色，与赤陶红暖调协调 */
  --gold-light: #F7E9D3;       /* 金色浅底，用于会员区暖色铺垫 */

  /* —— 圆角（四档，禁止散写其他值） —— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* —— 间距（4 的倍数） —— */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* —— 字体 —— */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  /* 国风衬线标题：优先本地托管 Noto Serif SC；系统回退按平台择优，Windows 用楷体/仿宋保国风感，避免塌成难看的 SimSun */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "STKaiti", "KaiTi", "FangSong", "SimSun", serif;

  /* —— 阴影（双阴影，赤陶色相，模拟纸张悬浮） —— */
  --shadow-near: 0 2px 8px rgba(184, 78, 52, 0.15);
  --shadow-far: 0 8px 24px rgba(184, 78, 52, 0.08);

  /* —— 布局 —— */
  --maxw: 1200px;
  --nav-h: 64px;
}