/**
 * Hauzii Console — Design Token CSS Variables
 * Style Pack: "Hauzii Orange"
 *
 * 品牌橘 + 深灰（不是純黑），整體溫暖但專業。
 * 放在 public/ 目錄，不經 Vite 編譯，改值後 deploy 即生效。
 *
 * 完整語意角色對照：docs/cloud/cld-11-console-token-mapping.md
 * 參考來源：cloud/asset-hub/storage/blocks/ *.ai.json (default_tokens)
 *
 * ════════════════════════════════════════════════════════════
 *  語意角色 → Token 對照（快速參考）
 * ════════════════════════════════════════════════════════════
 *
 *  _heading      → color.07 + typo.03   頁面標題、Stat 數字
 *  _heading_sm   → color.07 + typo.04   區段標題（card title 用 color.08）
 *  _subtitle     → color.08 + typo.05   副標題
 *  _body         → color.09 + typo.06   正文
 *  _body_small   → color.09 + typo.07   輔助文字、Sidebar nav
 *  _meta         → color.10 + typo.14   標籤、時間戳、URL
 *  _form_label   → color.08 + typo.18   表單標籤
 *  _form_input   → color.09 + typo.19   表單輸入
 *  _btn_primary  → button.01            CTA 按鈕
 *  _btn_outline  → button.06            灰邊框小按鈕
 *  _btn_ghost    → button.07            文字連結
 *  _card         → surface.02           主要卡片
 *  _section_alt  → surface.10           頁面背景
 */

:root {

  /* ══════════════════════════════════════════════
     COLOR — 品牌橘 + 暖灰調和
     ============================================== */

  /* ── Background ── */
  --hz-color-01: #FFFFFF;    /* Page / Card — 純白 */
  --hz-color-02: #FAF9F7;    /* Page main bg — 暖白（Sidebar 旁邊的大區域）*/
  --hz-color-03: #F3F1EE;    /* Track / Tag bg — 更暖的淺灰 */
  --hz-color-04: #1A1A1A;    /* Sidebar bg — 接近黑但不死黑 */
  --hz-color-05: #2A2A2A;    /* Sidebar hover / border — 比 04 亮一階 */
  --hz-color-06: #3A3A3A;    /* Sidebar active bg — 再亮一階 */

  /* ── Text ── */
  --hz-color-07: #1A1A1A;    /* Heading — 與 Sidebar bg 同色系，很深但不刺眼 */
  --hz-color-08: #4A4A4A;    /* Subtitle / Card title — 中深灰 */
  --hz-color-09: #6B6B6B;    /* Body text — 舒適閱讀灰 */
  --hz-color-10: #9B9B9B;    /* Muted / Meta — 淡灰 */
  --hz-color-11: #FFFFFF;    /* Text on dark — 純白 */
  --hz-color-12: #B0B0B0;    /* Body on dark surface — Sidebar 文字 */
  --hz-color-13: #C8C8C8;    /* Disabled / Placeholder */

  /* ── Accent（品牌橘）── */
  --hz-color-14: #f97316;    /* Primary — 品牌橘 */
  --hz-color-15: #ea580c;    /* Link / Hover — 深橘 */
  --hz-color-16: #fb923c;    /* Tertiary — 淺橘（裝飾）*/

  /* ── Status ── */
  --hz-color-17: #EF4444;    /* Error */
  --hz-color-18: #22C55E;    /* Success / Active */
  --hz-color-19: #F59E0B;    /* Warning */

  /* ── Border ── */
  --hz-color-20: #E5E3E0;    /* Default border — 暖灰邊框 */
  --hz-color-21: #F0EEEB;    /* Light border — 極淡 */


  /* ══════════════════════════════════════════════
     TYPOGRAPHY — 角色定義
     ============================================== */

  /* typo.01 — Display */
  --hz-typo-typo-01-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-01-fs: 2.5rem;
  --hz-typo-typo-01-fw: 800;
  --hz-typo-typo-01-lh: 1.2;
  --hz-typo-typo-01-ls: -0.025em;

  /* typo.02 — Heading XL */
  --hz-typo-typo-02-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-02-fs: 2rem;
  --hz-typo-typo-02-fw: 700;
  --hz-typo-typo-02-lh: 1.3;
  --hz-typo-typo-02-ls: -0.025em;

  /* typo.03 — Heading Large（頁面標題、Stat 大數字）*/
  --hz-typo-typo-03-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-03-fs: 1.5rem;
  --hz-typo-typo-03-fw: 700;
  --hz-typo-typo-03-lh: 1.4;
  --hz-typo-typo-03-ls: -0.02em;

  /* typo.04 — Heading Small（區段標題、卡片標題）*/
  --hz-typo-typo-04-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-04-fs: 1.0625rem;
  --hz-typo-typo-04-fw: 600;
  --hz-typo-typo-04-lh: 1.4;
  --hz-typo-typo-04-ls: 0em;

  /* typo.05 — Body Large（副標題）*/
  --hz-typo-typo-05-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-05-fs: 1.25rem;
  --hz-typo-typo-05-fw: 400;
  --hz-typo-typo-05-lh: 1.6;
  --hz-typo-typo-05-ls: 0em;

  /* typo.06 — Body（正文）*/
  --hz-typo-typo-06-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-06-fs: 0.9375rem;
  --hz-typo-typo-06-fw: 400;
  --hz-typo-typo-06-lh: 1.6;
  --hz-typo-typo-06-ls: 0em;

  /* typo.07 — Body Small（輔助文字、Sidebar nav）*/
  --hz-typo-typo-07-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-07-fs: 0.8125rem;
  --hz-typo-typo-07-fw: 400;
  --hz-typo-typo-07-lh: 1.5;
  --hz-typo-typo-07-ls: 0em;

  /* typo.08 — Caption */
  --hz-typo-typo-08-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-08-fs: 0.75rem;
  --hz-typo-typo-08-fw: 400;
  --hz-typo-typo-08-lh: 1.5;
  --hz-typo-typo-08-ls: 0em;

  /* typo.09 — Button Large */
  --hz-typo-typo-09-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-09-fs: 0.9375rem;
  --hz-typo-typo-09-fw: 600;
  --hz-typo-typo-09-lh: 1.2;
  --hz-typo-typo-09-ls: 0.02em;

  /* typo.10 — Button Small */
  --hz-typo-typo-10-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-10-fs: 0.8125rem;
  --hz-typo-typo-10-fw: 500;
  --hz-typo-typo-10-lh: 1.2;
  --hz-typo-typo-10-ls: 0.02em;

  /* typo.14 — Meta（標籤、時間戳）*/
  --hz-typo-typo-14-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-14-fs: 0.75rem;
  --hz-typo-typo-14-fw: 400;
  --hz-typo-typo-14-lh: 1.5;
  --hz-typo-typo-14-ls: 0.01em;

  /* typo.17 — Badge */
  --hz-typo-typo-17-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-17-fs: 0.6875rem;
  --hz-typo-typo-17-fw: 600;
  --hz-typo-typo-17-lh: 1.2;
  --hz-typo-typo-17-ls: 0.04em;

  /* typo.18 — Form Label */
  --hz-typo-typo-18-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-18-fs: 0.8125rem;
  --hz-typo-typo-18-fw: 500;
  --hz-typo-typo-18-lh: 1.5;
  --hz-typo-typo-18-ls: 0em;

  /* typo.19 — Form Input */
  --hz-typo-typo-19-ff: "Inter", "Noto Sans TC", sans-serif;
  --hz-typo-typo-19-fs: 0.875rem;
  --hz-typo-typo-19-fw: 400;
  --hz-typo-typo-19-lh: 1.5;
  --hz-typo-typo-19-ls: 0em;


  /* ══════════════════════════════════════════════
     BUTTON PRESETS
     ============================================== */

  /* button.01 — Primary（品牌 CTA）*/
  --hz-button-01-bg: var(--hz-color-14);
  --hz-button-01-text: var(--hz-color-11);
  --hz-button-01-border-width: 0;
  --hz-button-01-border-color: transparent;
  --hz-button-01-radius: 8px;
  --hz-button-01-padding-x: 1.5rem;
  --hz-button-01-padding-y: 0.625rem;
  --hz-button-01-hover-bg: var(--hz-color-15);
  --hz-button-01-hover-text: var(--hz-color-11);

  /* button.02 — Primary Small */
  --hz-button-02-bg: var(--hz-color-14);
  --hz-button-02-text: var(--hz-color-11);
  --hz-button-02-border-width: 0;
  --hz-button-02-border-color: transparent;
  --hz-button-02-radius: 6px;
  --hz-button-02-padding-x: 1rem;
  --hz-button-02-padding-y: 0.4375rem;
  --hz-button-02-hover-bg: var(--hz-color-15);
  --hz-button-02-hover-text: var(--hz-color-11);

  /* button.03 — Secondary（深灰按鈕）*/
  --hz-button-03-bg: var(--hz-color-07);
  --hz-button-03-text: var(--hz-color-11);
  --hz-button-03-border-width: 0;
  --hz-button-03-border-color: transparent;
  --hz-button-03-radius: 8px;
  --hz-button-03-padding-x: 1.5rem;
  --hz-button-03-padding-y: 0.625rem;
  --hz-button-03-hover-bg: var(--hz-color-05);
  --hz-button-03-hover-text: var(--hz-color-11);

  /* button.04 — Secondary Small */
  --hz-button-04-bg: var(--hz-color-07);
  --hz-button-04-text: var(--hz-color-11);
  --hz-button-04-border-width: 0;
  --hz-button-04-border-color: transparent;
  --hz-button-04-radius: 6px;
  --hz-button-04-padding-x: 1rem;
  --hz-button-04-padding-y: 0.4375rem;
  --hz-button-04-hover-bg: var(--hz-color-05);
  --hz-button-04-hover-text: var(--hz-color-11);

  /* button.05 — Outline（橘色邊框）*/
  --hz-button-05-bg: transparent;
  --hz-button-05-text: var(--hz-color-14);
  --hz-button-05-border-width: 1.5px;
  --hz-button-05-border-color: var(--hz-color-14);
  --hz-button-05-radius: 8px;
  --hz-button-05-padding-x: 1.5rem;
  --hz-button-05-padding-y: 0.625rem;
  --hz-button-05-hover-bg: var(--hz-color-14);
  --hz-button-05-hover-text: var(--hz-color-11);

  /* button.06 — Outline Small（灰邊框，Console 的「管理」「編輯」「取消」）*/
  --hz-button-06-bg: var(--hz-color-01);
  --hz-button-06-text: var(--hz-color-08);
  --hz-button-06-border-width: 1px;
  --hz-button-06-border-color: var(--hz-color-20);
  --hz-button-06-radius: 6px;
  --hz-button-06-padding-x: 0.75rem;
  --hz-button-06-padding-y: 0.375rem;
  --hz-button-06-hover-bg: var(--hz-color-03);
  --hz-button-06-hover-text: var(--hz-color-07);

  /* button.07 — Ghost（純文字連結風格）*/
  --hz-button-07-bg: transparent;
  --hz-button-07-text: var(--hz-color-14);
  --hz-button-07-border-width: 0;
  --hz-button-07-border-color: transparent;
  --hz-button-07-radius: 4px;
  --hz-button-07-padding-x: 0.5rem;
  --hz-button-07-padding-y: 0.25rem;
  --hz-button-07-hover-bg: rgba(249, 115, 22, 0.08);
  --hz-button-07-hover-text: var(--hz-color-15);

  /* button.08 — Nav CTA */
  --hz-button-08-bg: var(--hz-color-14);
  --hz-button-08-text: var(--hz-color-11);
  --hz-button-08-border-width: 0;
  --hz-button-08-border-color: transparent;
  --hz-button-08-radius: 6px;
  --hz-button-08-padding-x: 1.25rem;
  --hz-button-08-padding-y: 0.4375rem;
  --hz-button-08-hover-bg: var(--hz-color-15);
  --hz-button-08-hover-text: var(--hz-color-11);


  /* ══════════════════════════════════════════════
     SURFACE PRESETS
     ============================================== */

  /* surface.02 — Card Bordered（主要卡片）*/
  --hz-surface-02-bg: var(--hz-color-01);
  --hz-surface-02-border-width: 1px;
  --hz-surface-02-border-color: var(--hz-color-20);
  --hz-surface-02-radius: 10px;
  --hz-surface-02-shadow: none;

  /* surface.03 — Card Elevated */
  --hz-surface-03-bg: var(--hz-color-01);
  --hz-surface-03-border-width: 0;
  --hz-surface-03-border-color: transparent;
  --hz-surface-03-radius: 10px;
  --hz-surface-03-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

  /* surface.04 — Card Accent */
  --hz-surface-04-bg: var(--hz-color-02);
  --hz-surface-04-border-width: 0;
  --hz-surface-04-border-color: transparent;
  --hz-surface-04-radius: 8px;
  --hz-surface-04-shadow: none;

  /* surface.05 — Card Dark */
  --hz-surface-05-bg: var(--hz-color-04);
  --hz-surface-05-border-width: 0;
  --hz-surface-05-border-color: transparent;
  --hz-surface-05-radius: 10px;
  --hz-surface-05-shadow: none;

  /* surface.08 — Card Highlight（品牌色）*/
  --hz-surface-08-bg: var(--hz-color-14);
  --hz-surface-08-border-width: 0;
  --hz-surface-08-border-color: transparent;
  --hz-surface-08-radius: 10px;
  --hz-surface-08-shadow: none;

  /* surface.09 — Section Light */
  --hz-surface-09-bg: var(--hz-color-01);
  --hz-surface-09-border-width: 0;
  --hz-surface-09-border-color: transparent;
  --hz-surface-09-radius: 0;
  --hz-surface-09-shadow: none;

  /* surface.10 — Section Alternate（Console main bg）*/
  --hz-surface-10-bg: var(--hz-color-02);
  --hz-surface-10-border-width: 0;
  --hz-surface-10-border-color: transparent;
  --hz-surface-10-radius: 0;
  --hz-surface-10-shadow: none;


  /* ══════════════════════════════════════════════
     SHADOW
     ============================================== */
  --hz-shadow-01: 0 1px 2px rgba(0,0,0,0.04);
  --hz-shadow-02: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --hz-shadow-03: 0 8px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}