/* ============================================================
   設計 token(語意七角色 — playbook/04-css-patterns.md)
   暖沙奶油系:換品牌只改值、不改名
   ============================================================ */
:root {
  /* 色彩七角色 */
  --primary: #c98f2b;        /* 主色(琥珀金:按鈕 / active / 強調) */
  --primary-dark: #a87317;   /* 主色深(hover) */
  --bg: #f6f1e6;             /* 頁面底色(米白) */
  --surface: #ffffff;        /* 卡片 / 面板 */
  --surface-2: #f6edd8;      /* 次要面板(選中態 / 區塊底) */
  --ink: #2e2617;            /* 主文字 */
  --sub: #8a7351;            /* 次文字 */
  --line: #e6dcc4;           /* 分隔線 / 邊框 */

  /* 深色區塊(footer / 深底卡) */
  --invert-bg: #2e2617;
  --invert-ink: #f4efe6;
  --invert-sub: #d8c9a6;

  /* 狀態色(語意) */
  --ok: #4d7c4c;   --ok-bg: #eaf2e6;
  --warn: #b3541e; --warn-bg: #f9ece2;
  --danger: #b0433a; --danger-bg: #f7e7e4;
  --info: #3d6b8e; --info-bg: #e8f0f6;

  /* 欄外底色(比 --bg 深半階) */
  --bg-outer: #ece4d1;

  /* 節奏 token */
  --radius: 8px;
  --radius-lg: 16px;
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   莫蘭迪綠(sage)比色版 — html[data-theme="sage"] 時生效
   變數名不變,只換值(playbook 語意七角色原則)
   ============================================================ */
[data-theme="sage"] {
  --primary: #7c9682;
  --primary-dark: #5e7a66;
  --bg: #f1f3ee;
  --surface: #ffffff;
  --surface-2: #e6ece2;
  --ink: #2c332d;
  --sub: #75816f;
  --line: #dbe2d4;

  --invert-bg: #2f3a33;
  --invert-ink: #eef1ea;
  --invert-sub: #b7c4b2;

  --ok: #567d5b;   --ok-bg: #e8f0e6;
  --warn: #b06a3a; --warn-bg: #f7ede3;
  --danger: #a8524c; --danger-bg: #f6e9e7;
  --info: #5b7d8e; --info-bg: #e7eef2;

  --bg-outer: #e2e6dc;
}