/* ============================================================
   知我測驗 QuizPlanet — 測驗頁共享品牌令牌（design.md v1.1 鏡像）
   主站令牌源：src/config/style/theme.css（oklch）
   本檔以 hex 等值鏡像，供 public/quizzes/*.html 引用。
   規則：各測驗頁不得自行定義 :root 色票，一律引用本檔變數。
   v1.1（2026-09-17）：品牌主色由靛紫改為品牌橙（Tailwind orange 梯度）。
   ============================================================ */

/* ---------- Light ---------- */
:root{
  /* 底與文字 */
  --bg:#f8fafc;                 /* = --background */
  --card:#ffffff;               /* = --card */
  --ink:#1e293b;                /* = --foreground */
  --muted:#6b7280;              /* = --muted-foreground（次要文字） */
  --faint:#9ca3af;              /* 更淡一級的提示文字 */
  --ink-soft:#475569;
  --ink-faint:#94a3b8;

  /* 品牌（orange 600/500/800） */
  --brand:#ea580c;              /* = --primary */
  --brand-2:#f97316;            /* = --ring */
  --brand-deep:#9a3412;         /* 柔底上的深字、強調（orange 800） */
  --primary:#ea580c;
  --primary-hover:#c2410c;      /* orange 700 */
  --ring:#f97316;
  --highlight:#ff9800;          /* 僅限標題劃重點與成就點綴 */
  --destructive:#e5484d;

  /* 測驗頁資料視覺五維色（design.md §2.1「五維資料色」；僅圖表/徽章用，不做按鈕底） */
  --el-wood:#10b981;            /* 開拓性（木） */
  --el-fire:#f43f5e;            /* 熱血值（火） */
  --el-earth:#14b8a6;           /* 安穩需求（土） */
  --el-metal:#64748b;           /* 美感體質（金） */
  --el-water:#3b82f6;           /* 社交電量（水） */

  /* 柔底與線 */
  --accent:#ffedd5;             /* 選中／徽章柔橙底（orange 100） */
  --accent-foreground:#7c2d12;  /* orange 900 */
  --secondary:#e5e7eb;
  --line:#d1d5db;               /* = --border */
  --line-soft:#e9edf3;
  --line-strong:#c7cdd9;
  --track:#e9edf3;              /* 進度條軌道 */
  --radio:#fed7aa;              /* 選項圓點外框（orange 200） */
  --opt-hover:#fff7ed;          /* 選項 hover 底（orange 50） */
  --chip-bg:#f3f4f6;

  /* 漸層：進度／儀表／大數字／primary 按鈕（orange 400→600） */
  --brand-grad:linear-gradient(120deg,#fb923c,#ea580c);
  --grad:linear-gradient(120deg,#fb923c,#ea580c);
  --gold-grad:var(--brand-grad);   /* 舊名相容 */
  --gold-soft:#ffedd5;             /* 舊名相容 */
  --grad-soft:#fff7ed;             /* 淡橙柔底（orange 50） */

  /* 字體：與主站堆疊一致（無襯線標題） */
  --font-sans:"Noto Sans Mono",ui-sans-serif,system-ui,sans-serif,
    "PingFang TC","Microsoft JhengHei","Noto Sans TC";
  --font-display:var(--font-sans); /* 舊 Serif 標題已廢，顯示字體＝無襯線 */

  /* 圓角與陰影 */
  --ink-solid:#1e293b;          /* 永遠深色表面（toast/nudge/社群按鈕），不隨主題翻轉 */
  --radius:22px;
  --shadow-card:0 20px 50px -28px rgba(30,41,59,.25);
  --shadow-pop:0 12px 28px -10px rgba(234,88,12,.4);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- Dark（.dark 類切換；iframe 內跟隨主站主題） ---------- */
.dark{
  --bg:#0f172a;
  --card:#1e293b;
  --ink:#e2e8f0;
  --muted:#9ca3af;
  --faint:#64748b;
  --ink-soft:#cbd5e1;
  --ink-faint:#94a3b8;

  --brand:#fb923c;              /* orange 400 */
  --brand-2:#fb923c;
  --brand-deep:#fdba74;         /* orange 300 */
  --primary:#fb923c;
  --primary-hover:#f97316;
  --ring:#fb923c;

  --accent:#431407;             /* orange 950 深橙底 */
  --accent-foreground:#ffedd5;
  --secondary:#2d3748;
  --line:#4b5563;
  --line-soft:#334155;
  --line-strong:#475569;
  --track:#334155;
  --radio:#475569;
  --opt-hover:#263449;
  --chip-bg:#263449;

  --grad:linear-gradient(120deg,#fb923c,#f97316);
  --gold-grad:var(--grad);
  --gold-soft:#431407;
  --grad-soft:#2f1509;          /* 深橙柔底 */

  --shadow-card:0 20px 50px -28px rgba(0,0,0,.55);
  --shadow-pop:0 12px 28px -10px rgba(0,0,0,.65);
}

/* ---------- 基底（各頁不得重複宣告 body 字體） ---------- */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
}

/* 焦點環：可互動元素統一 */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--ring) 25%,transparent);
  border-radius:10px;
}

/* ---------- 嵌入模式（iframe 內）：隱藏測驗頁尾，內部連結交由 JS 轉 _top ---------- */
html.embedded .qp-footer{display:none}
/* 嵌入時 iframe 高度由 quiz-frame 自適應內容；
   body 的 min-height:100dvh 會與 iframe 高度互鎖（內容被拉伸出死空間），必須解除 */
html.embedded body,html.embedded main{min-height:0!important}

/* Hero 標題關鍵詞：橘色螢光筆底線（與首頁 Highlighter 同款，design.md §2.1） */
.hl-mark{background-image:linear-gradient(transparent 74%,rgba(255,152,0,.55) 74%);border-radius:2px;padding:0 .08em}