/* ── Design Tokens（全平台 CSS 變數）──────────────────────────
   改一處 → 全站變。templates 用 var(--qq-xxx) 引用。
   Source of truth: static/css/tokens.css
   ──────────────────────────────────────────────────────────── */

:root {
  /* 主色 / CTA */
  --qq-primary:        #4A90D9;
  --qq-primary-dark:   #2F5496;
  --qq-cta-grad:       linear-gradient(135deg, #4A90D9, #2F5496);
  --qq-primary-tint:   #1a2d4a;  /* active sidebar、淺背景 */
  --qq-primary-border: #2a3a5a;

  /* 狀態色 */
  --qq-success:        #4ade80;
  --qq-warning:        #fbbf24;
  --qq-danger:         #e74c3c;
  --qq-info:           #9bb8d9;
  --qq-danger-tint:    #2a1515;
  --qq-danger-border:  #4a2020;  /* danger 版 --qq-primary-border */
  --qq-warning-border: #4a2500;  /* warning 版 --qq-primary-border */
  --qq-warning-tint:   #2a2000;
  --qq-success-tint:   #0a2a15;
  --qq-success-border: #2a4a2a;  /* success 版 --qq-primary-border */

  /* 狀態 badge 三色系(橙/紫/青)+ 金色字:canonical 色對,components 與各頁共用 */
  --qq-badge-orange-bg: #2a1a00;  --qq-badge-orange-fg: #E67E22;
  --qq-badge-purple-bg: #2a1040;  --qq-badge-purple-fg: #9B59B6;
  --qq-badge-teal-bg:   #0a2520;  --qq-badge-teal-fg:   #1ABC9C;
  --qq-badge-gold-fg:   #D4A017;

  /* 背景層次（深→淺）*/
  --qq-bg-page:        #0a0a0b;
  --qq-bg-card:        #14151a;  /* 主要 card */
  --qq-bg-card-alt:    #18191c;  /* sidebar / 次卡片 */
  --qq-bg-input:       #1e1f23;
  --qq-bg-hover:       #222226;

  /* 文字 */
  --qq-text:           #e8e8e8;  /* 主要 */
  --qq-text-sub:       #c8c8c8;  /* 次要（在深底要保持可讀）*/
  --qq-text-tertiary:  #888;     /* label / hint */
  --qq-text-muted:     #555;     /* 弱化 */

  /* 邊框 */
  --qq-border:         #26272c;
  --qq-border-subtle:  #1a1b1f;
  --qq-border-strong:  #2a2b2f;

  /* 間距 scale（4px-based）*/
  --qq-space-xs:  4px;
  --qq-space-sm:  8px;
  --qq-space-md:  12px;
  --qq-space-lg:  16px;
  --qq-space-xl:  24px;
  --qq-space-2xl: 32px;

  /* 圓角 */
  --qq-radius-sm:   6px;
  --qq-radius-md:   9px;
  --qq-radius-lg:   12px;
  --qq-radius-xl:   16px;
  --qq-radius-pill: 999px;

  /* 陰影 */
  --qq-shadow-card:  0 2px 8px rgba(0,0,0,.2);
  --qq-shadow-modal: 0 20px 60px rgba(0,0,0,.5);
  --qq-shadow-cta:   0 2px 12px rgba(74,144,217,.3);

  /* 轉場 */
  --qq-tx-fast: .12s;
  --qq-tx:      .15s;
  --qq-tx-slow: .25s;

  /* 字體 */
  --qq-font: -apple-system, "Noto Sans TC", sans-serif;

  /* Typography scale */
  --qq-fs-display: 30px;  /* 頁面大標 */
  --qq-fs-h1:      24px;
  --qq-fs-h2:      18px;
  --qq-fs-h3:      16px;
  --qq-fs-body:    14px;  /* 主要內文 */
  --qq-fs-sm:      13px;  /* 次要內文 */
  --qq-fs-label:   12px;  /* 標籤 / caption */
  --qq-fs-micro:   11px;  /* meta、編號 */

  /* letter-spacing */
  --qq-ls-tight: -.5px;  /* 大字收緊 */
  --qq-ls-wide:  1.6px;  /* 大寫標題拉開 */

  /* ── Apple 質感層(issue #131)── */
  color-scheme: dark;                                 /* 原生控件 / 捲軸跟主題 */
  --qq-glass-bg:      rgba(20,21,26,.72);             /* 毛玻璃 chrome 底 */
  --qq-glass-border:  rgba(255,255,255,.08);
  --qq-backdrop:      saturate(180%) blur(20px);
  --qq-elev-1: 0 1px 2px rgba(0,0,0,.25);             /* 卡片靜置 */
  --qq-elev-2: 0 2px 8px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.04);  /* 浮起 / 主卡 */
  --qq-elev-3: 0 20px 60px rgba(0,0,0,.55);           /* modal */
  --qq-focus-ring: 0 0 0 3.5px rgba(74,144,217,.35);
  --qq-hairline:    rgba(255,255,255,.09);            /* 細邊框(取代實色灰)*/
  --qq-veil:        rgba(255,255,255,.05);            /* hover / 子層提亮 */
  --qq-veil-strong: rgba(255,255,255,.10);
  --qq-scrim:       rgba(0,0,0,.6);                   /* modal 遮罩 */
  --qq-title-grad: linear-gradient(135deg, #fff, #c0c8d5);
  --qq-toast-bg:   rgba(28,32,42,.8);
}

/* ── Light theme token overrides ── */
[data-theme="light"] {
  color-scheme: light;
  --qq-primary-border: #b9d3ee;
  --qq-bg-page:        #f2f3f7;  /* Apple systemGroupedBackground */
  --qq-bg-card:        #ffffff;
  --qq-bg-card-alt:    #fafbfc;
  --qq-bg-input:       #ffffff;
  --qq-bg-hover:       #f0f2f5;
  --qq-text:           #1a1d24;
  --qq-text-sub:       #4a5160;
  --qq-text-tertiary:  #6b7280;
  --qq-text-muted:     #9ca3af;
  --qq-border:         #e1e4e8;
  --qq-border-subtle:  #ebeef2;
  --qq-border-strong:  #d1d5db;
  --qq-primary-tint:   #e6f0fa;
  --qq-danger-tint:    #fde8e8;
  --qq-danger-border:  #f0c6c6;
  --qq-warning-border: #f0e2ab;
  --qq-warning-tint:   #fef3c7;
  --qq-success-tint:   #d1fae5;
  --qq-success-border: #a7d9bc;

  --qq-badge-orange-bg: #fdf0e0;  --qq-badge-orange-fg: #c2620c;
  --qq-badge-purple-bg: #f3e8fb;  --qq-badge-purple-fg: #7d3f9e;
  --qq-badge-teal-bg:   #dcf5ef;  --qq-badge-teal-fg:   #0e8b74;
  --qq-badge-gold-fg:   #a17c00;
  --qq-shadow-card:    0 1px 3px rgba(0,0,0,.06);
  --qq-shadow-modal:   0 12px 32px rgba(0,0,0,.12);
  /* 狀態色加深(白底對比)*/
  --qq-success:        #16a34a;
  --qq-warning:        #b45309;
  --qq-danger:         #dc2626;
  --qq-info:           #2F5496;
  /* Apple 質感層 */
  --qq-glass-bg:      rgba(252,253,254,.72);
  --qq-glass-border:  rgba(0,0,0,.07);
  --qq-elev-1: 0 1px 2px rgba(0,0,0,.05);
  --qq-elev-2: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --qq-elev-3: 0 24px 64px rgba(0,0,0,.18);
  --qq-hairline:    rgba(0,0,0,.08);
  --qq-veil:        rgba(0,0,0,.035);
  --qq-veil-strong: rgba(0,0,0,.06);
  --qq-scrim:       rgba(0,0,0,.35);
  --qq-title-grad: linear-gradient(135deg, #1a1d24, #3d4657);
  --qq-toast-bg:   rgba(250,251,253,.85);
}