/* ============================================================================
   DHI Breeding — 設計 Token（依 design-handoff/docs/design-system.md §2）
   ----------------------------------------------------------------------------
   本檔同時做兩件事：
   1. 定義新的高保真設計 token（暖白畫布 / 森林綠品牌 / 珊瑚橘主操作）。
   2. 把 index.html 既有的舊變數名「映射」到新色票，讓現有圖表與元件無痛沿用。
      圖表透過 refreshPal() 讀 --grid/--axis/--cink/--csub/--barc/--track，
      若直接刪除舊變數，所有 SVG 圖會失色，故此處保留並重新指向。
   註：新設計為淺色優先（預設 light，data-theme="dark" 才切深色），
      與原本「預設深色」相反，故舊的 :root 深色宣告需由本檔覆蓋（載入順序在其後）。
   ========================================================================== */

/* 同時涵蓋「未設屬性」與「明確 light」：舊 inline CSS 有 :root[data-theme="light"]，
   權重高於單純 :root，不一起指定的話舊色票會在切回淺色時勝出。 */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- 畫布與表面 ---- */
  --canvas: #f6f4ef;
  --surface-0: #ffffff;
  --surface-soft: #f1f5f2;
  --surface-warm: #fbf6f0;
  --surface-risk: #fff3ef;

  /* ---- 品牌森林綠 ---- */
  --brand-950: #06382d;
  --brand-900: #0a493a;
  --brand-800: #0f5b47;
  --brand-700: #176b53;
  --brand-500: #2b8a68;
  --brand-300: #83b9a4;
  --brand-100: #dfeee8;

  /* ---- 珊瑚橘：只給最重要的操作與焦點 ----
     design-system.md §2 寫的是 #f16b4d，但 13 張參考稿實測的加權眾數是 #f55024
     ——同一個交付包裡兩個來源不一致。依使用者裁示照稿調亮，並往文件值拉回 20%
     （AI 出圖普遍過飽和，各稿之間本身也有 #e85030～#f85018 的色偏，不宜精確複製）。

     分工刻意拆開，因為稿本身不符 WCAG AA：
       coral-500 #f5562d  填色/長條/圖表序列/圖示（其上不放小字；對暖白底 3.06:1）
       coral-700 #c42e08  淺底上的文字、以及帶白字的實心按鈕（白字 5.61:1 ✓ AA）
     直接把 coral-500 當按鈕底色配白字只有 3.36:1，小字不合格，故不採用。 */
  --coral-700: #c42e08;
  --coral-600: #e04418;
  --coral-500: #f5562d;
  /* --coral-solid 專供「實心按鈕底色 + 白字」。與 --coral-700 拆開的理由：
     coral-700 在深色主題必須提亮才能當文字色，但那樣白字就不夠對比了。
     一個 token 身兼「深色文字」與「按鈕底色」兩種角色，在兩個主題下必然衝突。 */
  --coral-solid: #c42e08;
  /* 情境鈕／主 CTA 的實心底：稿是 #f1541a，但白字只有 3.49:1（小字需 4.5）。
     固定稿的色相(16°)與彩度、只降明度，取仍 ≥4.5:1 的最亮值 → #d5430d（4.53:1）。
     比 --coral-solid 更貼近稿，又不犧牲可讀性；深色主題同理另給值。 */
  --coral-cta: #d5430d;
  --coral-100: #fef1ec;
  /* shell.css 用到 --coral-050 卻從未定義，一直吃 fallback（且是調亮前的舊珊瑚色）。 */
  --coral-050: rgb(245 86 45 / .10);

  --amber-700: #a96b12;
  --amber-500: #dfa333;
  --amber-100: #fff2cf;

  --danger-700: #b02d12;
  --danger-500: #d43f22;
  --danger-100: #fdeae4;

  /* ---- 文字與線條 ---- */
  --ink-950: #16211d;
  --ink-800: #26352f;
  --ink-600: #5e6d67;
  --ink-500: #73817b;
  --line-1: #e4e8e5;
  --line-strong: #cdd6d1;

  /* ---- 圖表序列 ---- */
  --chart-1: #0f5b47;
  --chart-2: #2b8a68;
  --chart-3: #8dbdaa;
  --chart-4: #f16b4d;
  --chart-5: #dfa333;
  --chart-6: #d84a45;

  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Consolas, monospace;

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

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
  --radius-xl: 28px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(18 38 30 / 0.05), 0 6px 16px rgb(18 38 30 / 0.04);
  --shadow-md: 0 2px 4px rgb(18 38 30 / 0.05), 0 16px 36px rgb(18 38 30 / 0.08);
  --shadow-panel: -16px 0 48px rgb(18 38 30 / 0.16);

  --sidebar-wide: 248px;
  --sidebar-rail: 80px;
  --topbar-h: 72px;
  --mobile-nav-h: 72px;
  --content-max: 1680px;

  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 140ms;
  --duration-normal: 220ms;

  /* ==== 舊變數映射（淺色）：讓既有元件與圖表沿用，不必一次改寫 ==== */
  --bg: var(--canvas);
  --card: var(--surface-0);
  --card2: var(--surface-soft);
  --ink: var(--ink-950);
  --sub: var(--ink-600);
  --line: var(--line-1);
  --green: var(--brand-500);
  --amber: var(--amber-700);
  --red: var(--danger-700);
  --blue: #2f7fc7;
  --accent: var(--brand-700);
  --accent2: var(--brand-900);
  --bodybg: #e9e6df;
  --navbg: rgb(255 255 255 / .94);
  --phonebg: var(--canvas);
  --surface: var(--surface-soft);
  --track: #e8ede9;
  --midline: var(--line-strong);
  --range: var(--line-1);
  --grid: #e8ece9;          /* 圖表網格線：不可用純黑 */
  --axis: var(--line-strong);
  --cink: var(--ink-950);   /* 圖表文字 */
  --csub: var(--ink-600);
  --barc: var(--brand-300);
  /* 全國概況設計包新增的三個圖表色。之所以進 token 而不是寫在 render 函式裡：
     PAL 由 refreshPal() 從這裡讀，寫死的顏色切到深色主題就失效（見 index.html
     refreshPal 上方註解，那是實測踩過的）。
       --band-sd   世代標準差帶（實色，不是半透明——底下的水平格線已一併移除）
       --barc-soft 比 --barc 更淡的長條，用在「分布」而非「比較」的直方圖
       --refline   基準線／分隔線（非資料元素，不可與序列色混用） */
  --band-sd: #d8e5d9;
  --barc-soft: #b8cebc;
  --refline: #a5a4a3;
  --refline-2: #bebebe;
  /* 蝴蝶圖（幫了／拖累）與散布圖點色。與 --pal-you / --pal-bad 分開：那一對是
     「你的場／損失」的語意色，這一組是設計包指定的、比較柔的對照色，
     而且散布圖是幾百個點疊在一起，要比序列色更淡才不會糊成一塊。 */
  --div-up: #48785f;
  --div-dn: #fd7136;
  --dot-soft: #94aa90;
  /* 「大數字／大標」的強調色。⚠️ 不可以直接用 --brand-900 —— 它只在淺色區塊
     定義（本檔 28 行），深色主題沒有覆寫，於是深綠字落在深綠卡上，實測
     幾乎看不見。凡是**當文字色**用的深綠都改用這個 token；當**底色**用的
     （例如分段鈕選中態）維持 --brand-900，深底配白字兩種主題都成立。 */
  --num-strong: #0b3521;
  --g1: #ffffff;
  --g2: var(--surface-soft);
  --bannerg1: var(--brand-100);

  /* 圖表序列語意色（供 refreshPal 讀取，避免 render 函式硬編碼） */
  --pal-you: var(--chart-1);    /* 你的場：主序列 */
  --pal-nat: #9aa8a2;           /* 全國：對照序列 */
  --pal-amber: var(--chart-5);  /* 警戒 */
  --pal-bad: var(--chart-4);    /* 損失／風險 */

  /* 圖上「疊在色塊裡的文字」專用色。與序列色分開，因為兩者的無障礙門檻不同：
     序列色是非文字元素（3:1 即可），文字要 4.5:1。四個象限底是 12% 混色的淡塊，
     直接用序列色寫字只有 2.0–2.5:1（實測）。深淺主題各給一組。 */
  --lbl-good:  #1f6b4f;   /* 綠象限 on #e7f7ef → 5.79:1 */
  --lbl-warn:  #8a6018;   /* 橘象限 on #fcf4e7 → 5.11:1 */
  --lbl-info:  #2f6288;   /* 藍象限 on #f2f9fe → 6.13:1 */
  --lbl-bad:   #8a4830;   /* 紅象限 on #faf0ef → 6.16:1 */
  --lbl-pill:  #ffffff;   /* 實心膠囊上的字 */
  --pill-you:  #1f7a5a;   /* 「你的場／你的群」膠囊底：白字 5.26:1 */
  --pill-nat:  #5e6d67;   /* 「全國／現役牛均」膠囊底：白字 5.44:1 */
  --pill-cow:  #c2401f;   /* 散點高亮膠囊底：白字 5.19:1 */

  /* -------- 別名：補上一批「被引用但從未定義」的 token --------
     稽核發現 shell.css 有 14 個 var(--x) 找不到定義、共 38 次引用，
     其中 --ink-700 / --ink-900 / --surface-1 / --surface-2 / --line-2
     在本次改動之前就已經壞著。無定義又無 fallback 的 var() 會讓整條宣告
     在計算值階段失效（色彩改為繼承、背景變透明），是看不出來但真的錯的那種。
     這裡一次補齊並映到既有色階，新舊兩邊同時修好。 */
  --ink-900:   var(--ink-950);
  --ink-700:   var(--ink-600);
  --ink-400:   var(--ink-500);
  --surface-1: var(--surface-0);
  --surface-2: var(--surface-soft);
  --line-2:    var(--line-strong);
  --you-50:    var(--brand-100);
  --you-600:   var(--brand-700);
  --info-50:   var(--brand-100);
  --warn-50:   var(--amber-100);
  --bad-50:    var(--danger-100);
  --bad-700:   var(--danger-700);
}

/* ---------------------------------------------------------------- 深色主題 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0f1714;
  --surface-0: #16211d;
  --surface-soft: #1b2a24;
  --surface-warm: #2a211d;
  --surface-risk: #2b1c1a;

  --ink-950: #f3f7f4;
  --ink-800: #d8e1dc;
  --ink-600: #aab8b1;
  --ink-500: #91a098;
  --line-1: #2d3b35;
  --line-strong: #42534b;

  /* 深底上的品牌與強調需提亮，否則對比不足 */
  --brand-500: #43a884;
  --brand-300: #6fae98;
  --brand-100: #1e3a30;
  --coral-500: #ff7048;
  --coral-600: #f75f36;
  /* 深底上：coral-700 轉為「文字色」需提亮；按鈕底色另用 coral-solid 維持深色以配白字。
     coral-100 原本沒有深色版，會落回淺色的近白 #fef1ec，在深色卡片上刺眼。 */
  --coral-700: #ff8b63;
  --coral-solid: #c8340c;
  /* 深色主題不另給較亮的值：#d8460f 白字只有 4.37:1，低於 4.5。
     實心按鈕的底色在深底上本來就不需要提亮（周圍不是白底、不靠亮度區隔）。 */
  --coral-cta: #d5430d;
  --coral-100: #3a1a12;
  --coral-050: rgb(255 112 72 / .12);
  --danger-100: #3a1a17;
  --amber-500: #e8b455;
  --amber-700: #e0a63c;
  --danger-500: #e26761;
  --danger-700: #dd5b55;

  --chart-1: #4fae8c;
  --chart-2: #6fc4a3;
  --chart-3: #3d6d5c;
  --chart-4: #ff7f63;
  --chart-5: #e8b455;
  --chart-6: #e26761;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 6px 16px rgb(0 0 0 / .28);
  --shadow-md: 0 2px 4px rgb(0 0 0 / .32), 0 16px 36px rgb(0 0 0 / .45);
  --shadow-panel: -16px 0 48px rgb(0 0 0 / .55);

  /* ==== 舊變數映射（深色） ==== */
  --bg: var(--canvas);
  --card: var(--surface-0);
  --card2: var(--surface-soft);
  --ink: var(--ink-950);
  --sub: var(--ink-600);
  --line: var(--line-1);
  --green: var(--brand-500);
  --amber: var(--amber-700);
  --red: var(--danger-700);
  --blue: #5aa9ec;
  --accent: var(--brand-500);
  --accent2: #2f7d61;
  --bodybg: #080e0c;
  --navbg: rgb(18 28 24 / .93);
  --phonebg: var(--canvas);
  --surface: var(--surface-soft);
  --track: #23342c;
  --midline: var(--line-strong);
  --range: var(--line-1);
  --grid: #26342e;
  --axis: #3d4f47;
  --cink: var(--ink-950);
  --csub: var(--ink-600);
  --barc: #3f6a58;
  /* 深底版：帶與長條都要壓暗到能承載主序列線（--pal-you 在深色是 --chart-2），
     基準線則要比 --grid 亮一階才看得出是「線」而不是網格。 */
  --band-sd: #28453b;
  --barc-soft: #38584c;
  --refline: #5a6862;
  --refline-2: #47554f;
  /* 深底上兩個對照色都要提亮才有 3:1；點色則相反 —— 要壓暗一點，
     幾百個點疊在深底上用亮色會糊成一片綠霧。 */
  --div-up: #6aa886;
  --div-dn: #ff8b5e;
  --dot-soft: #5e7d68;
  --num-strong: #e4f1ea;
  --g1: #1b2a24;
  --g2: #16211d;
  --bannerg1: #17322a;

  --pal-you: var(--chart-2);
  --pal-nat: #7f8f88;
  --pal-amber: var(--chart-5);
  --pal-bad: var(--chart-4);

  /* 暗色主題：象限底變成深色（12% 混深底），淺色主題那組深字反而更看不見
     （實測 #1f6b4f on #1a3428 只有 2.09:1）。改為同色相的亮版。
     膠囊底則相反 —— 暗底上用亮色底配深字才夠。 */
  --lbl-good:  #6fd6a8;
  --lbl-warn:  #e8c069;
  --lbl-info:  #86bce8;
  --lbl-bad:   #eb9b7c;
  --lbl-pill:  #0b1512;   /* 亮膠囊上用深字 */
  --pill-you:  #6fc4a3;
  --pill-nat:  #aab8b1;
  --pill-cow:  #f0a488;
}

/* 三段字級：以根節點屬性控制，不用瀏覽器縮放（design-system.md §3） */
:root[data-font-scale="large"]  { --font-scale: 1.12; }
:root[data-font-scale="xlarge"] { --font-scale: 1.24; }
:root { --font-scale: 1; }