/* qlink-theme.css v1.0.0 · git@git_ai:Qlink-TP/qlink_theme.git · 產生檔，請勿手改 */

/* =========================================================================
   qlink-theme.css — 由 tools/derive-theme.py + tools/emit.py 產生，請勿手改。
   要調整請改 derive-theme.py 裡的 CIE L* 目標值，再重跑兩支程式。

   設計法則（每一條都被 docs/derivation.md 實測過）
   1. 面階梯在 CIE L* 空間等距排列。深淺的步距刻意不同（見下方各階的實測值）
      的唯一根治法；直接調 OKLCH 的 L 百分比會塌，因為那是立方根座標。
   2. 相鄰大色塊不可用 WCAG 對比判斷（它的 +0.05 眩光項會淹掉暗端差異）。
      WCAG 只用於文字與 UI 元件。
   3. 深色 5 階全靠亮度；淺色只有 3 階亮度（白是天花板），第 4 階改用陰影。
      這是刻意的不對稱：陰影在深色模式看不見，在淺色模式才有效。
   4. --text-disabled 刻意不保證 AA（WCAG 1.4.3 對停用/裝飾性文字豁免）。
      名字即契約：任何「讀不到就漏資訊」的文字一律不准用它。
   5. 四個彩色 token 共用同一個 OKLCH L，等視覺亮度；色相兩兩至少差 60°，
      確保「類別色彼此分得開」，不是只跟底色分得開。

   主題切換：三態。無屬性 = 跟隨系統；[data-theme] = 明確指定，兩個方向都蓋得掉。
   ========================================================================= */

:root {
  color-scheme: dark;

  --qlink-theme-version: "1.0.0";
  --fs-1: 12px;                                 /* 註記、單位、表格內的次要標籤 */
  --fs-2: 13px;                                 /* 標籤、圖例、藥丸、頁尾 */
  --fs-3: 14px;                                 /* 內文與表格 —— 基準階 · 基準 */
  --fs-4: 16px;                                 /* 強調數字、頁籤、區塊標題 */
  --fs-5: 18px;                                 /* 面板標題 */
  --fs-6: 26px;                                 /* 頁面標題 */
  --bg-sunken: oklch(16.42% 0.0000 0deg);       /* #0E0E0E · L* 4.0 */
  --bg-canvas: oklch(23.28% 0.0000 0deg);       /* #1D1D1D · L* 11.0 */
  --bg-surface: oklch(29.31% 0.0000 0deg);      /* #2C2C2C · L* 18.0 */
  --bg-surface-2: oklch(35.34% 0.0000 0deg);    /* #3B3B3B · L* 25.0 */
  --bg-surface-3: oklch(41.38% 0.0000 0deg);    /* #4B4B4B · L* 32.0 */
  --border-subtle: oklch(43.10% 0.0000 0deg);   /* #505050 · L* 34.0 */
  --border-strong: oklch(53.45% 0.0000 0deg);   /* #6D6D6D · L* 46.0 */
  --text-primary: oklch(93.10% 0.0000 0deg);    /* #E8E8E8 · L* 92.0 */
  --text-secondary: oklch(79.74% 0.0000 0deg);  /* #BDBDBD · L* 76.5 */
  --text-disabled: oklch(67.24% 0.0000 0deg);   /* #969696 · L* 62.0 */
  --accent: oklch(81.00% 0.0931 258deg);        /* #9CC3FD · L* 78.0 */
  --on-accent: oklch(16.42% 0.0000 0deg);       /* #0E0E0E · L* 4.0 · 對比 10.68 */
  --success: oklch(81.00% 0.1300 150deg);       /* #7FD994 · L* 79.6 */
  --on-success: oklch(16.42% 0.0000 0deg);      /* #0E0E0E · L* 4.0 · 對比 11.21 */
  --warning: oklch(81.00% 0.1300 85deg);        /* #E7BA54 · L* 77.7 */
  --on-warning: oklch(16.42% 0.0000 0deg);      /* #0E0E0E · L* 4.0 · 對比 10.61 */
  --danger: oklch(81.00% 0.1043 25deg);         /* #FDA69F · L* 76.6 */
  --on-danger: oklch(16.42% 0.0000 0deg);       /* #0E0E0E · L* 4.0 · 對比 10.26 */
  --elev-1: 0 1px 2px rgb(0 0 0 / .55);
  --elev-2: 0 2px 10px rgb(0 0 0 / .60);
  --elev-3: 0 8px 28px rgb(0 0 0 / .65);
  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent);
  --overlay: rgb(0 0 0 / .66);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg-sunken: oklch(84.48% 0.0000 0deg);       /* #CCCCCC · L* 82.0 */
    --bg-canvas: oklch(89.66% 0.0000 0deg);       /* #DDDDDD · L* 88.0 */
    --bg-surface: oklch(94.83% 0.0000 0deg);      /* #EEEEEE · L* 94.0 */
    --bg-surface-2: oklch(100.00% 0.0000 0deg);   /* #FFFFFF · L* 100.0 */
    --bg-surface-3: oklch(100.00% 0.0000 0deg);   /* #FFFFFF · L* 100.0 */
    --border-subtle: oklch(81.03% 0.0000 0deg);   /* #C1C1C1 · L* 78.0 */
    --border-strong: oklch(67.24% 0.0000 0deg);   /* #969696 · L* 62.0 */
    --text-primary: oklch(29.31% 0.0000 0deg);    /* #2C2C2C · L* 18.0 */
    --text-secondary: oklch(44.83% 0.0000 0deg);  /* #555555 · L* 36.0 */
    --text-disabled: oklch(58.62% 0.0000 0deg);   /* #7C7C7C · L* 52.0 */
    --accent: oklch(43.80% 0.1500 258deg);        /* #0E4EA2 · L* 34.3 */
    --on-accent: oklch(100.00% 0.0000 0deg);      /* #FFFFFF · L* 100.0 · 對比 7.99 */
    --success: oklch(43.80% 0.1172 150deg);       /* #07632C · L* 36.3 */
    --on-success: oklch(100.00% 0.0000 0deg);     /* #FFFFFF · L* 100.0 · 對比 7.42 */
    --warning: oklch(43.80% 0.0872 85deg);        /* #684D06 · L* 34.6 */
    --on-warning: oklch(100.00% 0.0000 0deg);     /* #FFFFFF · L* 100.0 · 對比 7.89 */
    --danger: oklch(43.80% 0.1500 25deg);         /* #932123 · L* 32.7 */
    --on-danger: oklch(100.00% 0.0000 0deg);      /* #FFFFFF · L* 100.0 · 對比 8.47 */
    --elev-1: 0 1px 2px rgb(0 0 0 / .08);
    --elev-2: 0 2px 10px rgb(0 0 0 / .12);
    --elev-3: 0 8px 28px rgb(0 0 0 / .16);
    --focus-ring: 0 0 0 2px var(--bg-surface-2), 0 0 0 4px var(--accent);
    --overlay: rgb(0 0 0 / .40);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-sunken: oklch(84.48% 0.0000 0deg);       /* #CCCCCC · L* 82.0 */
  --bg-canvas: oklch(89.66% 0.0000 0deg);       /* #DDDDDD · L* 88.0 */
  --bg-surface: oklch(94.83% 0.0000 0deg);      /* #EEEEEE · L* 94.0 */
  --bg-surface-2: oklch(100.00% 0.0000 0deg);   /* #FFFFFF · L* 100.0 */
  --bg-surface-3: oklch(100.00% 0.0000 0deg);   /* #FFFFFF · L* 100.0 */
  --border-subtle: oklch(81.03% 0.0000 0deg);   /* #C1C1C1 · L* 78.0 */
  --border-strong: oklch(67.24% 0.0000 0deg);   /* #969696 · L* 62.0 */
  --text-primary: oklch(29.31% 0.0000 0deg);    /* #2C2C2C · L* 18.0 */
  --text-secondary: oklch(44.83% 0.0000 0deg);  /* #555555 · L* 36.0 */
  --text-disabled: oklch(58.62% 0.0000 0deg);   /* #7C7C7C · L* 52.0 */
  --accent: oklch(43.80% 0.1500 258deg);        /* #0E4EA2 · L* 34.3 */
  --on-accent: oklch(100.00% 0.0000 0deg);      /* #FFFFFF · L* 100.0 · 對比 7.99 */
  --success: oklch(43.80% 0.1172 150deg);       /* #07632C · L* 36.3 */
  --on-success: oklch(100.00% 0.0000 0deg);     /* #FFFFFF · L* 100.0 · 對比 7.42 */
  --warning: oklch(43.80% 0.0872 85deg);        /* #684D06 · L* 34.6 */
  --on-warning: oklch(100.00% 0.0000 0deg);     /* #FFFFFF · L* 100.0 · 對比 7.89 */
  --danger: oklch(43.80% 0.1500 25deg);         /* #932123 · L* 32.7 */
  --on-danger: oklch(100.00% 0.0000 0deg);      /* #FFFFFF · L* 100.0 · 對比 8.47 */
  --elev-1: 0 1px 2px rgb(0 0 0 / .08);
  --elev-2: 0 2px 10px rgb(0 0 0 / .12);
  --elev-3: 0 8px 28px rgb(0 0 0 / .16);
  --focus-ring: 0 0 0 2px var(--bg-surface-2), 0 0 0 4px var(--accent);
  --overlay: rgb(0 0 0 / .40);
}

/* -------------------------------------------------------------------------
   既有專案 token 對照（要漸進遷移時，把下面這段複製到專案自己的檔案裡啟用）
   —— 只映射樣式角色，不碰業務語意。
   :root {
     --bg:     var(--bg-canvas);
     --card:   var(--bg-surface);
     --side:   var(--bg-surface);   // 注意：--side 原本是版面角色被塞進深度階梯
     --line:   var(--border-subtle);
     --fg:     var(--text-primary);
     --muted:  var(--text-secondary);   // 不是 --text-disabled
     --ok:     var(--success);
     --bad:    var(--danger);
     --warn:   var(--warning);
   }
   ------------------------------------------------------------------------- */