/* ============================================================
   tokens.css — 全站唯一的顏色與設計代幣來源
   規則（見 CLAUDE.md）：
   1. 本檔以外的任何 CSS 禁止出現 hex/rgb 色碼，一律引用 var(--*)。
   2. 新增代幣前先確認是否已有語義相近的代幣可用。
   3. 修改任何代幣，必須同時檢查 light 與 dark 兩個主題的效果。
   設計語言：現代辦公風格 — 暖紙白/暖炭灰、低飽和、單一節制強調色。
   禁止：霓虹色、glow 陰影、賽博漸層、動態背景（造成視覺疲勞）。
   ============================================================ */

:root {
  /* ---- 色彩：Light（預設） ---- */
  --color-bg:            #fafaf8;  /* 暖紙白頁面底 */
  --color-surface:       #ffffff;  /* 卡片、面板 */
  --color-surface-alt:   #f1f0ec;  /* 調色盤底、畫布底、表格條紋 */
  --color-border:        #e2e0da;
  --color-border-strong: #c9c6bd;
  --color-text:          #2d2c28;  /* 暖近黑，非純黑 */
  --color-text-muted:    #6d6a61;
  --color-text-invert:   #ffffff;
  --color-accent:        #1a73e8;  /* Google 藍，節制使用 */
  --color-accent-hover:  #1765cc;
  --color-accent-soft:   #e8f0fe;  /* 選取底色、chips */
  --color-danger:        #c5221f;
  --color-danger-soft:   #fce8e6;
  --color-edge:          #9aa0a6;  /* 建置器連線 */
  --container-fill:      rgba(60, 60, 50, 0.04);  /* 容器框（VPC）內部淡底 */
  --select-rect-fill:    rgba(26, 115, 232, 0.08);  /* 框選填色，半透明讓被圈選元件可見 */
  --color-overlay:       rgba(20, 19, 17, 0.62);    /* lightbox／modal 背景遮罩 */

  /* ---- GCP 服務分類色（低飽和，兩主題共用；徽章上白字） ---- */
  --cat-compute:   #4285f4;
  /* storage 原值 #e8930c 白字對比僅 2.44:1（其餘分類最低 3.5:1），
     徽章縮寫幾乎不可讀；壓深為 #b96f04 → 白字 3.93:1，仍是可辨識的
     storage 琥珀橘，且在暗主題深底（3.65:1）與亮主題調色盤底（3.45:1）都成立。 */
  --cat-storage:   #b96f04;
  --cat-network:   #0f9d58;
  --cat-database:  #7b5ec7;
  --cat-analytics: #12808c;
  --cat-aiml:      #d0611c;
  --cat-secops:    #5f6368;
  /* 地端（on-prem）：非 GCP 服務，用中性鋼藍灰與雲端服務區隔；白字對比約 5.6:1，兩主題皆成立 */
  --cat-onprem:    #566573;

  /* ---- 分區框（frame）代幣：8 色，低飽和，僅供框線與標籤文字使用，
     白/黑字不上此色。對比皆以 --color-bg #fafaf8 為底計算，全數 ≥5:1。 ---- */
  --frame-1: #2d5fb0;  /* 藍：對比 5.95:1 */
  --frame-2: #227a4e;  /* 綠：對比 5.07:1 */
  --frame-3: #a05a00;  /* 琥珀：對比 5.08:1 */
  --frame-4: #6a3fa0;  /* 紫：對比 7.10:1 */
  --frame-5: #0f7080;  /* 青：對比 5.51:1 */
  --frame-6: #a83e5e;  /* 玫瑰：對比 5.72:1 */
  --frame-7: #5c5a54;  /* 灰：對比 6.60:1 */
  --frame-8: #3f4ea0;  /* 靛：對比 7.15:1 */

  /* ---- 陰影（柔和、無 glow） ---- */
  --shadow-sm: 0 1px 2px rgba(60, 60, 50, 0.08);
  --shadow-md: 0 2px 8px rgba(60, 60, 50, 0.12);
  --shadow-lg: 0 4px 16px rgba(60, 60, 50, 0.14);

  /* ---- 圓角 ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ---- 字體 ---- */
  --font-sans: "Segoe UI", "Microsoft JhengHei", "PingFang TC",
               "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "Cascadia Code", "Courier New", monospace;

  /* ---- 字級階層（1.25 比例） ---- */
  --text-xs:   0.75rem;   /* 12px 輔助標籤 */
  --text-sm:   0.875rem;  /* 14px 次要文字 */
  --text-base: 1rem;      /* 16px 內文 */
  --text-lg:   1.25rem;   /* 20px 小標 */
  --text-xl:   1.5625rem; /* 25px 區塊標題 */
  --text-2xl:  1.953rem;  /* 31px 頁面標題 */
  --text-3xl:  2.441rem;  /* 39px Hero */

  /* ---- 間距節奏（4px 基準） ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- 版面 ---- */
  --content-max: 1080px;
  --header-height: 60px;

  /* ---- 動態（僅允許短促、功能性的轉場） ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

html[data-theme="dark"] {
  --color-bg:            #232220;  /* 暖炭灰，非純黑 */
  --color-surface:       #2b2a27;
  --color-surface-alt:   #34322e;
  --color-border:        #44423d;
  --color-border-strong: #5a5750;
  --color-text:          #e8e6e1;
  --color-text-muted:    #a5a29a;
  --color-text-invert:   #232220;
  --color-accent:        #8ab4f8;  /* 去飽和藍，適配深底 */
  --color-accent-hover:  #a5c5f9;
  --color-accent-soft:   #2d3a50;
  --color-danger:        #f28b82;
  --color-danger-soft:   #4a2b28;
  --color-edge:          #80868b;
  --container-fill:      rgba(255, 255, 255, 0.03);
  --select-rect-fill:    rgba(138, 180, 248, 0.10);  /* 框選填色，半透明讓被圈選元件可見 */
  --color-overlay:       rgba(0, 0, 0, 0.72);         /* lightbox／modal 背景遮罩 */

  /* ---- 分區框（frame）代幣：暗主題整體提亮一階，對比皆以 --color-bg #232220
     為底計算，全數 ≥6:1。白/黑字不上此色，僅框線與文字用。 ---- */
  --frame-1: #8ab4f8;  /* 藍：對比 7.54:1 */
  --frame-2: #6fcf97;  /* 綠：對比 8.36:1 */
  --frame-3: #f2b94d;  /* 琥珀：對比 8.95:1 */
  --frame-4: #c58af2;  /* 紫：對比 6.28:1 */
  --frame-5: #4fd1c5;  /* 青：對比 8.52:1 */
  --frame-6: #f28bab;  /* 玫瑰：對比 6.86:1 */
  --frame-7: #c2bfb6;  /* 灰：對比 8.65:1 */
  --frame-8: #a3b0f0;  /* 靛：對比 7.59:1 */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55);
}