:root {
  /* springs.estate palette — theme-forest default */
  --bg: #162D24;
  --fg: #E0D1B6;
  --accent: #F5E8D1;

  /* M3 color roles */
  --color-primary: var(--accent);
  --color-on-primary: var(--bg);
  --color-secondary: var(--fg);
  --color-on-secondary: var(--bg);
  --color-surface: var(--bg);
  --color-on-surface: var(--fg);
  --color-surface-variant: rgba(224, 209, 182, 0.08);
  --color-on-surface-variant: rgba(224, 209, 182, 0.7);

  /* M3 shape */
  --shape-small: 4px;
  --shape-medium: 8px;
  --shape-large: 16px;

  /* M3 elevation */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  --elev-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);

  /* M3 typography — CJK fallback chain: Noto → macOS/iOS → Windows → Linux
   * Ensures Chinese glyphs render even if Noto Serif/Sans SC is not installed.
   * Order matters: prefer Latin display faces first, then CJK. */
  --font-display: 'Victor Serif', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'WenQuanYi Micro Hei', serif;
  --font-body: 'TT Commons Pro', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'WenQuanYi Micro Hei', sans-serif;
  --font-utility: 'TT Commons Pro', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'WenQuanYi Micro Hei', sans-serif;

  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-utility: 12px;

  /* Motion — single easing + dual duration */
  --ease: cubic-bezier(0.25, 0.74, 0.22, 0.99);
  --dur-micro: 0.4s;
  --dur-reveal: 0.8s;

  /* Batch C — letter-spacing tokens for hero h1 deleted.
   * Sleep-well English uppercase 0.18em tracking was inherited but
   * doesn't fit Chinese display type. Per-page inline styles now write
   * `letter-spacing: -0.04em` (tight editorial) directly. */

  /* Absorbed DNA — vwlab.io maroon + flyingpapers yellow */
  /* 用于 auth 流程：login 保留 yellow + wine 招牌；register 改用 wine 全套 */
  --accent-wine: #5D3136;
  --accent-yellow: #F4ED36;

  /* Translucent wine overlays — romanjeanelie alpha pattern */
  /* Used by theme-vivid (matches/training) for CT1 layered depth */
  /* Defaults are dim; theme-vivid redefines with brighter red */
  --wine-overlay-04: rgba(93, 49, 54, 0.04);
  --wine-overlay-12: rgba(93, 49, 54, 0.12);
  --wine-overlay-20: rgba(93, 49, 54, 0.2);
  --wine-overlay-60: rgba(93, 49, 54, 0.6);

  /* SX4 navy chapter — sleep-well-creatives 二态色 (C7 例外：用户批准加第 4 色) */
  --navy: #010D6E;
  --navy-ink: #FEF1D0;  /* navy bg 上的 cream 文字 */

  /* Batch B — universal navy accent (replaces wine per C7: hue swap, not new color) */
  --accent-navy: #010D6E;          /* SX4 navy — universal accent */
  --navy-overlay-04: rgba(1, 13, 110, 0.04);
  --navy-overlay-12: rgba(1, 13, 110, 0.12);
  --navy-overlay-20: rgba(1, 13, 110, 0.20);
  --navy-overlay-60: rgba(1, 13, 110, 0.60);

  /* Node 14-15 /me personal center — noomo agency DNA layer (lavender + amber) */
  --lavender-tint: rgba(196, 197, 241, 0.07);   /* noomo soft lavender overlay */
  --lavender-mid: rgba(196, 197, 241, 0.15);     /* stronger tint for cards */
  --amber-glow: rgba(255, 160, 50, 0.5);        /* warm amber glow — rAF 驱动 */
  --amber-shadow: rgba(255, 120, 0, 0.35);       /* text-shadow 用 */

  /* ===== BWF bracket — light surface tokens (Phase 12 节点 25 — revised 2026-09-08)
   * Activated by <div class="bracket bracket--bwf"> on /match-bracket.
   * Light/white surface only — does NOT touch --bg/--fg/--accent (keeps three-color discipline).
   * Only consumed inside .bracket--bwf namespace; never read by other pages.
   */
  --bwf-surface: #FFFFFF;                          /* pure white panel */
  --bwf-card: #F5E8D1;                             /* beige match card — uses existing beige */
  --bwf-fg: #162D24;                               /* forest text on white */
  --bwf-fg-muted: rgba(22, 45, 36, 0.55);
  --bwf-border: rgba(22, 45, 36, 0.18);            /* hairline divider */
  --bwf-border-strong: var(--bg);                  /* card outline + connector — M8 bump to full opacity (was 0.65, too faint on cream — read as "broken" connector) */
  --bwf-line-thin: rgba(22, 45, 36, 0.10);         /* entry separator inside card */
  --bwf-flag-bg: rgba(22, 45, 36, 0.06);           /* country flag chip bg */
  --bwf-winner-bg: rgba(182, 85, 96, 0.06);        /* wine tint for winner row */
  --bwf-wine: #B65560;                             /* wine accent (matches theme-forest) */
  --bwf-success: #2D7A3F;                          /* forest-tinted green for success messages */

  /* Nodes 24-35 admin — Sowieso/Wero DNA layer */
  /* Yellow (#FFF48D) as subtle highlight — active nav, stat accents (<2% surface) */
  --admin-sidebar-bg: #162D24;                     /* forest — sidebar */
  --admin-sidebar-fg: #E0D1B6;                     /* cream — sidebar text */
  --admin-sidebar-active: #FFF48D;                 /* sowieso yellow — active nav */
  --admin-sidebar-hover: rgba(224, 209, 182, 0.08); /* cream overlay on hover */
  --admin-surface: #F5E8D1;                        /* beige — card/panel surface */
  --admin-surface-hover: rgba(224, 209, 182, 0.12); /* row hover state */
  --admin-border: rgba(22, 45, 36, 0.15);          /* subtle divider */
  --admin-text: #162D24;                           /* forest — main text */
  --admin-text-muted: rgba(22, 45, 36, 0.55);      /* secondary text */
  --admin-accent-wine: #B65560;                    /* wine — destructive actions */
}

body.theme-forest {
  --bg: #162D24;
  --fg: #E0D1B6;
  --accent: #F5E8D1;
  --accent-wine: #B65560;  /* forest 主题 wine 提亮保 ≥4.5 对比 */
}

body.theme-cream {
  --bg: #F5E8D1;
  --fg: #162D24;
  --accent: #162D24;
}

body.theme-stone {
  --bg: #2A3431;
  --fg: #D9CFB8;
  --accent: #F5E8D1;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.625;
  margin: 0;
  transition:
    background var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease);
}

h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; letter-spacing: -1.2px; margin: 0 0 24px; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.8px; margin: 0 0 16px; }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.4px; margin: 0 0 12px; }
p  { margin: 0 0 16px; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-micro) var(--ease); }
a:hover { color: var(--fg); }

main { padding: 80px 40px; max-width: 1440px; margin: 0 auto; }