/* ============================================================
 * quiz-tokens.css — Phase B 問卷視覺強化 Design Tokens
 * 來源：PHASE-B-QUIZ-VISUAL-SPEC.md v0.3 §4.1
 * 建立：2026-04-21（Wave 1）
 * 載入順序：須在 persona-tokens.css 之前
 * ============================================================ */

:root {
  /* ===== 基底色（全站沿用，此處為 token 命名） ===== */
  --bg-base:         #060e1a;
  --bg-card:         rgba(12, 31, 59, 0.72);
  --bg-card-hover:   rgba(18, 34, 58, 0.82);
  --text-primary:    #e8e0d4;
  --text-dim:        #8a9ab5;
  --text-muted:      #5a6a85;

  /* ===== 金色系（品牌主色） ===== */
  --gold:            #C8A96A;
  --gold-soft:       rgba(200, 169, 106, 0.12);
  --gold-glow:       0 0 24px rgba(200, 169, 106, 0.28);
  --gold-line:       rgba(200, 169, 106, 0.18);

  /* ===== 安全色（Phase D：success / unlock 解鎖） ===== */
  --safe:            #4a9a6a;
  --safe-soft:       rgba(106, 200, 150, 0.12);
  --safe-glow:       0 0 24px rgba(106, 200, 150, 0.28);
  --safe-line:       rgba(106, 200, 150, 0.22);

  /* ===== 警示色（Phase D：failed / 挽回，低飽和不刺激） ===== */
  --danger:          #c0392b;
  --danger-soft:     rgba(212, 131, 106, 0.10);
  --danger-glow:     0 0 24px rgba(212, 131, 106, 0.22);
  --danger-line:     rgba(212, 131, 106, 0.20);

  /* ===== 字級階（對齊 L3 實機值；單位 px。詳見 §4.0） ===== */
  --fs-tag:          11px;   /* mono 徽章、tag */
  --fs-kicker:       11px;   /* SECTION KICKER，letter-spacing:4px */
  --fs-label:        12px;   /* 區塊副標、footer、en 小字 */
  --fs-note:         13px;   /* 圖表下 note、action column head */
  --fs-body:         15px;   /* 正文下限（L3 summary-body 等）*/
  --fs-core:         16px;   /* 核心敘事（L3 pc-sub, story-line）*/
  --fs-body-lg:      18px;   /* 強調段（L3 story-line:last-child）*/
  --fs-title-sm:     22px;   /* 卡片主標（L3 rh h1, sel-name）*/
  --fs-title:        24px;   /* 路徑名（L3 path-name）*/
  --fs-display:      30px;   /* L1/L2 題目 prompt 桌機 */
  --fs-hero:         38px;   /* ARCHETYPE 主稱（L3 pc-name）*/
  --fs-hero-lg:      42px;   /* 大字母（L3 path-letter）*/
  --fs-hero-xl:      52px;   /* 精選 icon（L3 sel-icon）*/

  /* ===== Mobile 字級（@media max-width:600px）— 原則：盡量不縮 ===== */
  --fs-body-m:       15px;   /* 不跟 L3 的 15→14 縮，維持 15 */
  --fs-body-lg-m:    18px;
  --fs-core-m:       16px;
  --fs-title-sm-m:   20px;
  --fs-title-m:      22px;
  --fs-display-m:    26px;
  --fs-hero-m:       30px;
  --fs-hero-lg-m:    36px;

  /* ===== 間距階（8px 基數） ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;   /* section gap 主值 */
  --space-6:  28px;
  --space-8:  40px;

  /* ===== 圓角（2 階制） ===== */
  --radius-card:  14px;    /* 題卡、報告卡、dialog */
  --radius-btn:   12px;    /* CTA、選項 */
  --radius-tag:   999px;   /* pill、徽章 */

  /* ===== 陰影（3 階制 + 強化版，由淺入深） ===== */
  --shadow-soft:         0 2px 10px rgba(0, 0, 0, 0.18);   /* 一般卡片 */
  --shadow-card:         0 8px 24px rgba(0, 0, 0, 0.28);   /* 題卡、主角卡 */
  --shadow-card-strong:  0 8px 32px rgba(0, 0, 0, 0.4);    /* 深色主報告 .gl 級 */
  --shadow-lift:         0 14px 38px rgba(0, 0, 0, 0.38);  /* hover 抬升、Modal */

  /* ===== 動效曲線與時長 ===== */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);   /* 進場、reveal */
  --ease-inout:    cubic-bezier(0.4, 0, 0.2, 1);     /* 元件狀態切換 */
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);    /* meter fill、distribution bar（彈出感強） */
  --dur-fast:      160ms;
  --dur-base:      240ms;
  --dur-slow:      420ms;
  --dur-reveal:    700ms;

  /* ===== 觸控 / 互動 ===== */
  --min-touch:     44px;   /* 全站下限 */
  --min-touch-m:   52px;   /* 行動端選項 */
  --min-touch-m-coarse: 56px;  /* hover:none ∧ pointer:coarse */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}