/* 31house 情報站 — design tokens（正式；來源 docs/design/tokens.draft.css）
 *
 * 方向 B「海軍藍點睛」（主人 2026-10-02 裁決）
 *   中性冷灰為底，CI 海軍藍 #1D4567 只用在品牌標記、主要按鈕、導覽選取、連結；
 *   CI 粉霧藍 #D0E4EE 只用在選取／hover 的淡色底。資料本身（數字、圖表）唱主角。
 *   CI 來源見 docs/design/CI-EXTRACTION.md；規範與對比值見 docs/design/DESIGN.md。
 *
 * 對比（WCAG 2.x，皆已用 dataviz validate_palette.js 的 contrast() 實測）：
 *   light: text/surface 15.20  muted/surface 5.88  brand-ink/brand 10.00  accent-ink/accent 7.63
 *   dark : text/surface 13.91  muted/surface 6.77  brand-ink/brand  9.09  accent-ink/accent 9.21
 * 圖表 --chart-1…8：light 對 #FFFFFF、dark 對 #182029 都跑過 validator（相鄰 CVD ΔE ≥ 8.4、
 *   正常視覺 ΔE ≥ 19.3）。light 的 chart-3/4/5 對白底 < 3:1 → 必須有直接標籤或表格視圖。
 *
 * 零外部依賴：沒有 Google Fonts、沒有 CDN。改色請重算對比並重跑 validator。
 *
 * 引用方式：base.html 先載 tokens.css 再載 app.css（元件樣式）；
 *   主題切換在 <html> 上寫 data-theme="light|dark"，不寫則跟隨系統。
 */

:root {
  color-scheme: light;

  /* ---- 底層與文字 ---- */
  --color-bg: #F4F6F8;            /* 頁面底：冷灰 */
  --color-surface: #FFFFFF;       /* 卡片、表格、面板 */
  --color-surface-2: #F8FAFB;     /* 表頭、斑馬列、次層面板 */
  --color-border: #DCE3E9;        /* 裝飾性分隔線（非文字，不受 3:1 限制） */
  --color-border-strong: #8796A5; /* 表單欄位外框：對白 3.03:1（WCAG 1.4.11） */
  --color-text: #1A2733;          /* 主要文字：帶海軍藍調的墨色 */
  --color-muted: #586675;         /* 次要文字、軸標籤 */

  /* ---- 品牌（CI） ---- */
  --color-brand: #1D4567;         /* CI 主色：主要按鈕、品牌標記、導覽選取、連結 */
  --color-brand-hover: #163752;
  --color-brand-ink: #FFFFFF;     /* 品牌色上的文字 */
  --color-accent: #D0E4EE;        /* CI 輔色（logo 圓盤）：選取列、hover、可信度條底 */
  --color-accent-ink: #1D4567;    /* accent 上的文字 */
  --color-focus: #2F6FA3;         /* focus ring（對白 5.35:1） */

  /* ---- 狀態（保留語意，永遠搭配 icon＋文字） ---- */
  --color-success: #1E7A4C;
  --color-success-soft: #E3F3EA;
  --color-warn: #8F5B00;
  --color-warn-soft: #FBF0DC;
  --color-danger: #B42A2A;
  --color-danger-soft: #FBE6E6;

  /* ---- 圖表：分類色（固定順序，不循環；第 9 個系列併入「其他」） ---- */
  --chart-1: #2F6FA3;   /* CI 藍（由 #1D4567 提亮） */
  --chart-2: #EB6834;   /* 橘 */
  --chart-3: #1BAF7A;   /* 青綠 */
  --chart-4: #EDA100;   /* 黃 */
  --chart-5: #E87BA4;   /* 粉紅 */
  --chart-6: #008300;   /* 綠 */
  --chart-7: #4A3AA7;   /* 紫 */
  --chart-8: #E34948;   /* 紅 */

  /* 圖表：序列色（單一 CI 藍色相，低→高） */
  --seq-1: #86B2D3;
  --seq-2: #5F95BD;
  --seq-3: #3D7CB0;
  --seq-4: #1D4567;
  --seq-5: #132F47;

  /* 圖表：發散色（紅 ← 灰 → 藍；中點是中性灰，不是色相） */
  --div-neg-2: #C03A39;
  --div-neg-1: #E98A87;
  --div-mid: #EEF1F4;
  --div-pos-1: #86B2D3;
  --div-pos-2: #2F6FA3;

  /* 圖表外框 */
  --chart-grid: #E6EBEF;          /* 格線：1px 實線，退後 */
  --chart-axis: #C3CDD6;          /* 基線 */

  /* ---- 間距（4px 基準） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- 圓角 ---- */
  --radius-sm: 4px;   /* 標籤、表格內 chip、輸入框 */
  --radius-md: 8px;   /* 按鈕、flash、stat tile */
  --radius-lg: 12px;  /* 卡片、登入卡 */

  /* ---- 陰影 ---- */
  --shadow-1: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .08);
  --shadow-2: 0 4px 12px rgba(16, 32, 48, .10), 0 2px 4px rgba(16, 32, 48, .06);

  /* ---- 字體（系統字堆疊，零網路依賴） ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    "Noto Sans Mono", monospace;

  /* 字級 */
  --text-xs: 12px;    /* 軸刻度、註腳（最小值） */
  --text-sm: 14px;    /* 表格、標籤、次要說明 */
  --text-base: 16px;  /* 正文、表單 */
  --text-lg: 18px;    /* 卡片標題 */
  --text-xl: 22px;    /* 頁面標題 */
  --text-2xl: 28px;   /* stat tile 數值 */
  --text-hero: 40px;  /* 單一主數字 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0F151B;
    --color-surface: #182029;
    --color-surface-2: #1D2631;
    --color-border: #2B3742;
    --color-border-strong: #5E6F80;
    --color-text: #E6EDF3;
    --color-muted: #9AA8B6;
    --color-brand: #9CC3E0;
    --color-brand-hover: #B7D5EB;
    --color-brand-ink: #0F1E2C;
    --color-accent: #24384A;
    --color-accent-ink: #D0E4EE;
    --color-focus: #6FA6D6;
    --color-success: #56C08C;
    --color-success-soft: #16302A;
    --color-warn: #E2A93F;
    --color-warn-soft: #33291A;
    --color-danger: #F2777A;
    --color-danger-soft: #3A2024;
    --chart-1: #4A8BC4;
    --chart-2: #D95926;
    --chart-3: #199E70;
    --chart-4: #C98500;
    --chart-5: #D55181;
    --chart-6: #008300;
    --chart-7: #9085E9;
    --chart-8: #E66767;
    --seq-1: #2C5A85;
    --seq-2: #3D7CB0;
    --seq-3: #5E98C9;
    --seq-4: #88B6DC;
    --seq-5: #B8D5EC;
    --div-neg-2: #F08A8A;
    --div-neg-1: #8A3E40;
    --div-mid: #2A333D;
    --div-pos-1: #3D7CB0;
    --div-pos-2: #88B6DC;
    --chart-grid: #26313B;
    --chart-axis: #3A4855;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .30);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0F151B;
  --color-surface: #182029;
  --color-surface-2: #1D2631;
  --color-border: #2B3742;
  --color-border-strong: #5E6F80;
  --color-text: #E6EDF3;
  --color-muted: #9AA8B6;
  --color-brand: #9CC3E0;
  --color-brand-hover: #B7D5EB;
  --color-brand-ink: #0F1E2C;
  --color-accent: #24384A;
  --color-accent-ink: #D0E4EE;
  --color-focus: #6FA6D6;
  --color-success: #56C08C;
  --color-success-soft: #16302A;
  --color-warn: #E2A93F;
  --color-warn-soft: #33291A;
  --color-danger: #F2777A;
  --color-danger-soft: #3A2024;
  --chart-1: #4A8BC4;
  --chart-2: #D95926;
  --chart-3: #199E70;
  --chart-4: #C98500;
  --chart-5: #D55181;
  --chart-6: #008300;
  --chart-7: #9085E9;
  --chart-8: #E66767;
  --seq-1: #2C5A85;
  --seq-2: #3D7CB0;
  --seq-3: #5E98C9;
  --seq-4: #88B6DC;
  --seq-5: #B8D5EC;
  --div-neg-2: #F08A8A;
  --div-neg-1: #8A3E40;
  --div-mid: #2A333D;
  --div-pos-1: #3D7CB0;
  --div-pos-2: #88B6DC;
  --chart-grid: #26313B;
  --chart-axis: #3A4855;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .30);
}