/* ==========================================================================
   tokens.css — 双主题设计变量（A 版原生 / B 版 Vue 共用同一份）
   切换方式：<html data-theme="light"> 或 <html data-theme="dark">
   ========================================================================== */

:root {
  /* ---- 与主题无关的尺寸 ---- */
  --sidebar-w: 208px;
  --topbar-h: 56px;
  --content-max: 760px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-hero: 30px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
             'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC',
             'Noto Sans CJK SC', sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;

  --t-fast: 0.15s ease;
  --t-base: 0.24s ease;
}

/* ==========================================================================
   浅色主题（对齐参考图：白底 + 中性灰 + 深色主按钮）
   ========================================================================== */
:root[data-theme='light'] {
  --bg: #ffffff;
  --bg-side: #f9f9f9;
  --bg-raised: #ffffff;
  --bg-sunken: #f4f4f5;

  --bg-hover: #f0f0f1;
  --bg-active: #e8e8ea;
  --bg-chip: #ffffff;
  --bg-code: #f6f6f7;

  --border: #e8e8e8;
  --border-soft: #f0f0f0;
  --border-strong: #d4d4d6;

  --fg: #1a1a1a;
  --fg-sub: #6b6b70;
  --fg-mute: #9a9aa0;
  --fg-invert: #ffffff;

  --accent: #8b5a2b;
  --accent-soft: rgba(139, 90, 43, 0.1);
  --accent-line: rgba(139, 90, 43, 0.28);

  --btn-primary-bg: #1a1a1a;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #000000;

  --ok: #1f9d55;
  --warn: #c77700;
  --bad: #d64545;
  --ok-bg: rgba(31, 157, 85, 0.1);
  --warn-bg: rgba(199, 119, 0, 0.1);
  --bad-bg: rgba(214, 69, 69, 0.1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);

  --scroll-thumb: rgba(0, 0, 0, 0.18);
  --overlay: rgba(0, 0, 0, 0.32);

  /* 侧栏底色（浅）与品牌语底纹
     透明度经过对比度核算：0.66 在金/白之间约 2.9:1，能看清又不抢内容 */
  --sidebar-fill: linear-gradient(180deg, #ffffff 0%, #f6f2ea 100%);
  --sidebar-mark: rgba(139, 90, 43, 0.66);
  --sidebar-mark-sub: rgba(139, 90, 43, 0.58);
}

/* ==========================================================================
   深色主题（沿用 meihua2 玄学暗金）
   ========================================================================== */
:root[data-theme='dark'] {
  --bg: #0a0a12;
  --bg-side: #0f0f18;
  --bg-raised: #14141f;
  --bg-sunken: #08080f;

  --bg-hover: rgba(212, 167, 116, 0.08);
  --bg-active: rgba(212, 167, 116, 0.16);
  --bg-chip: rgba(255, 255, 255, 0.04);
  --bg-code: rgba(0, 0, 0, 0.3);

  --border: rgba(212, 167, 116, 0.16);
  --border-soft: rgba(212, 167, 116, 0.1);
  --border-strong: rgba(212, 167, 116, 0.34);

  --fg: #e8d5b5;
  --fg-sub: rgba(232, 213, 181, 0.62);
  --fg-mute: rgba(232, 213, 181, 0.36);
  --fg-invert: #14100a;

  --accent: #d4a574;
  --accent-soft: rgba(212, 167, 116, 0.12);
  --accent-line: rgba(212, 167, 116, 0.38);

  --btn-primary-bg: linear-gradient(135deg, #8b5a2b, #c4833a);
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: linear-gradient(135deg, #a06b35, #d4934a);

  --ok: #6fcf97;
  --warn: #e0b060;
  --bad: #e07a7a;
  --ok-bg: rgba(111, 207, 151, 0.12);
  --warn-bg: rgba(224, 176, 96, 0.12);
  --bad-bg: rgba(224, 122, 122, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.6);

  --scroll-thumb: rgba(212, 167, 116, 0.28);
  --overlay: rgba(0, 0, 0, 0.6);

  /* 侧栏底色（深）与品牌语底纹 */
  --sidebar-fill: linear-gradient(180deg, #12121c 0%, #0a0a12 100%);
  --sidebar-mark: rgba(212, 167, 116, 0.60);
  --sidebar-mark-sub: rgba(212, 167, 116, 0.48);
}

/* ==========================================================================
   卦象 / 体用 语义色（两套主题各自取值，保证对比度）
   ========================================================================== */
:root[data-theme='light'] {
  --gua-good: #1f9d55;
  --gua-good-bg: rgba(31, 157, 85, 0.09);
  --gua-warn: #c77700;
  --gua-warn-bg: rgba(199, 119, 0, 0.09);
  --gua-bad: #d64545;
  --gua-bad-bg: rgba(214, 69, 69, 0.09);
  --gua-neutral: #4a6fa5;
  --gua-neutral-bg: rgba(74, 111, 165, 0.09);
  --gua-line-yang: #1a1a1a;
  --gua-line-yin: #1a1a1a;
  --gua-move: #c77700;
}

:root[data-theme='dark'] {
  --gua-good: #6fcf97;
  --gua-good-bg: rgba(111, 207, 151, 0.1);
  --gua-warn: #e0b060;
  --gua-warn-bg: rgba(224, 176, 96, 0.1);
  --gua-bad: #e07a7a;
  --gua-bad-bg: rgba(224, 122, 122, 0.1);
  --gua-neutral: #8fb0d9;
  --gua-neutral-bg: rgba(143, 176, 217, 0.1);
  --gua-line-yang: #e8d5b5;
  --gua-line-yin: #e8d5b5;
  --gua-move: #e0b060;
}