/*
 * 唯一的 design token 來源。兩個消費者：
 *   - apps/dashboard  由 Vite 以一般 CSS 匯入
 *   - apps/app        由 wrangler 的 Text rule 以字串匯入，inline 進直出頁的 <style>
 * 所以這個檔案只能有 :root 自訂屬性——不能有 @import、不能有 url()、不能有選擇器規則。
 */
:root {
  --bg: #F5F4F1;
  --surface: #FFFFFF;
  --border: #E5E4E0;
  --text: #1A1D1B;
  --text-muted: #5E625C;
  --text-subtle: #6B6F69;

  --accent: #2A4A3C;
  --accent-hover: #213B30;
  --accent-fg: #FFFFFF;
  --accent-soft: #EAEFEB;
  --accent-text: #3F6350;

  --warn-number: #8A6A38;

  /* 圖表：第一條線用 accent，第二條線（訪客）用淡一階的同色系。 */
  --chart-2: #9DB5A8;

  --pill-ok-bg: #ECF1ED;
  --pill-ok-fg: #3F6350;
  --pill-warn-bg: #F4EFE4;
  --pill-warn-fg: #7A6435;
  --pill-danger-bg: #F3E9E7;
  --pill-danger-fg: #8A4F48;

  /* 「使用 Google 登入」按鈕（Phase 4C）：依 Google 的品牌規範，不隨主題色改變。 */
  --google-btn-bg: #FFFFFF;
  --google-btn-bg-hover: #F7F8F8;
  --google-btn-fg: #1F1F1F;
  --google-btn-border: #747775;

  /* 標籤的八個顏色（Phase 5）。資料庫存色名，色碼只在這裡；每一組都要過 WCAG AA（scripts/invariants.test.mjs）。 */
  --tag-gray-bg: #ECEBE7;
  --tag-gray-fg: #55584F;
  --tag-red-bg: #F3E6E3;
  --tag-red-fg: #8A4338;
  --tag-orange-bg: #F5E9DC;
  --tag-orange-fg: #85501F;
  --tag-yellow-bg: #F3EED6;
  --tag-yellow-fg: #6B5A17;
  --tag-green-bg: #E4EFE6;
  --tag-green-fg: #2F6143;
  --tag-teal-bg: #DFEEEC;
  --tag-teal-fg: #23605A;
  --tag-blue-bg: #E3EBF3;
  --tag-blue-fg: #325C85;
  --tag-purple-bg: #EBE6F2;
  --tag-purple-fg: #5F4A86;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  --font-sans: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 24px;
  --fs-h1: 20px;
  --fs-h2: 15px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-micro: 11px;

  --focus-ring: 0 0 0 3px rgba(42, 74, 60, 0.22);
  --shadow-pop: 0 8px 28px rgba(26, 29, 27, 0.12);
}