/* ============================================================
   2026-Taxi · 清色藍黃主題（Clear Blue–Yellow）
   附加樣式表 — 只覆寫顏色變數，不觸碰任何版面規則
   ------------------------------------------------------------
   安裝：在 index.html 既有的 styles.css 之後多加一行
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="theme-clear-blue-yellow.css">   <!-- 新增 -->

   本檔不含任何 layout / display / position / margin / padding /
   width / height / flex / grid 宣告，移除即完全復原。
   ============================================================ */


/* ------------------------------------------------------------
   PART A · 既有變數覆寫（必要，安全）
   變數名稱與原檔完全一致，只換值。
   ------------------------------------------------------------ */

:root {
  --bg-primary:      #fdf6e0;   /* 紙地 · 帶黃調，非灰白 */
  --bg-surface:      #fffdf4;
  --bg-card:         #fdf9ea;
  --bg-card-hover:   #f8edcf;

  --border-light:    #e3d6ae;
  --border-active:   #16659f;   /* 主強調由陶土改為純豔藍 */

  --text-main:       #0f2d55;   /* 墨色 · 深豔藍，非炭黑 */
  --text-secondary:  #1d4a7d;
  --text-muted:      #2b5c92;   /* 原為灰階，改為帶色調 */

  /* 強調色：主要區辨落在黃↔藍安全軸 */
  --accent-terracotta: #16659f;  /* 主強調（變數名沿用，值改為純豔藍） */
  --accent-amber:      #f5c145;  /* 明亮金 */
  --accent-sage:       #29ac9d;  /* 純豔青綠 · 正確 */
  --accent-blue:       #16659f;
  --accent-red:        #12386a;  /* 錯誤 · 改用深豔藍，見下方說明 */

  --badge-bg-mc:  rgba(22, 101, 159, 0.10);
  --badge-bg-tfo: rgba(41, 172, 157, 0.14);
  --badge-bg-tfx: rgba(18, 56, 106, 0.10);

  --shadow-sm: 0 2px 8px rgba(15, 45, 85, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 45, 85, 0.09);
  --shadow-lg: 0 16px 40px rgba(15, 45, 85, 0.13);
}

[data-theme="dark"] {
  --bg-primary:      #0f2d55;   /* 深底 · 深豔藍，非近黑 */
  --bg-surface:      #143865;
  --bg-card:         #17406f;
  --bg-card-hover:   #1d4a7d;

  --border-light:    #2b5c92;
  --border-active:   #f5c145;   /* 深底上以金色作主強調，明度差最大 */

  --text-main:       #fdf6e0;
  --text-secondary:  #cfe4f8;
  --text-muted:      #9ac4ee;

  --accent-terracotta: #f5c145;
  --accent-amber:      #f8e6a8;
  --accent-sage:       #29ac9d;
  --accent-blue:       #7ec8f2;
  --accent-red:        #f8e6a8;

  --badge-bg-mc:  rgba(126, 200, 242, 0.16);
  --badge-bg-tfo: rgba(41, 172, 157, 0.20);
  --badge-bg-tfx: rgba(248, 230, 168, 0.14);

  --shadow-sm: 0 4px 12px rgba(4, 20, 40, 0.34);
  --shadow-md: 0 10px 28px rgba(4, 20, 40, 0.46);
  --shadow-lg: 0 20px 48px rgba(4, 20, 40, 0.60);
}


/* ------------------------------------------------------------
   PART B · 八大分類色階（新增變數，原檔沒有）
   L* 每級固定遞降 10，轉灰階後順序仍成立。
   深淺兩種模式共用同一組色值 — 請勿分開設定，
   否則亮度階梯會斷。
   ------------------------------------------------------------ */

:root,
[data-theme="dark"] {
  --cat-1: #fbf2bb;  --cat-1-ink: #0f2d55;   /* L* 95  引擎與動力系統 */
  --cat-2: #f5d247;  --cat-2-ink: #0f2d55;   /* L* 85  潤滑與冷卻系統 */
  --cat-3: #eaaf0f;  --cat-3-ink: #0f2d55;   /* L* 75  燃料與排氣系統 */
  --cat-4: #20adc3;  --cat-4-ink: #062040;   /* L* 65  傳動與變速系統 */
  --cat-5: #1b8eb7;  --cat-5-ink: #05182f;   /* L* 55  轉向與懸吊系統 */
  --cat-6: #146eb3;  --cat-6-ink: #fdf6e0;   /* L* 45  煞車與制動系統 */
  --cat-7: #0f4f98;  --cat-7-ink: #fdf6e0;   /* L* 34  電系與儀表設備 */
  --cat-8: #0b357e;  --cat-8-ink: #fdf6e0;   /* L* 24  輪胎與底盤保養 */
}


/* --- B2 · 滿版色塊 ------------------------------------------
   每格先設三個區域變數，再由通用規則套用。
   這樣格內的題數 chip 與說明文會自動跟著卡片明暗走，
   不必為八個分類各寫一次。                                   */

.grid-cell[data-cat-id="cat_1"] { --cell-bg: var(--cat-1); --cell-ink: var(--cat-1-ink); --cell-chip: rgba(15, 45, 85, 0.10); }
.grid-cell[data-cat-id="cat_2"] { --cell-bg: var(--cat-2); --cell-ink: var(--cat-2-ink); --cell-chip: rgba(15, 45, 85, 0.10); }
.grid-cell[data-cat-id="cat_3"] { --cell-bg: var(--cat-3); --cell-ink: var(--cat-3-ink); --cell-chip: rgba(15, 45, 85, 0.12); }
.grid-cell[data-cat-id="cat_4"] { --cell-bg: var(--cat-4); --cell-ink: var(--cat-4-ink); --cell-chip: rgba(6, 32, 64, 0.14); }
.grid-cell[data-cat-id="cat_5"] { --cell-bg: var(--cat-5); --cell-ink: var(--cat-5-ink); --cell-chip: rgba(5, 24, 47, 0.16); }
.grid-cell[data-cat-id="cat_6"] { --cell-bg: var(--cat-6); --cell-ink: var(--cat-6-ink); --cell-chip: rgba(253, 246, 224, 0.16); }
.grid-cell[data-cat-id="cat_7"] { --cell-bg: var(--cat-7); --cell-ink: var(--cat-7-ink); --cell-chip: rgba(253, 246, 224, 0.16); }
.grid-cell[data-cat-id="cat_8"] { --cell-bg: var(--cat-8); --cell-ink: var(--cat-8-ink); --cell-chip: rgba(253, 246, 224, 0.18); }

/* 通用套用：只改顏色，不碰版面 */
.grid-cell[data-cat-id] {
  background: var(--cell-bg);
  color: var(--cell-ink);
  border-color: transparent;
}

.grid-cell[data-cat-id] h4,
.grid-cell[data-cat-id] .cell-code,
.grid-cell[data-cat-id] .cell-desc,
.grid-cell[data-cat-id] .cell-stats,
.grid-cell[data-cat-id] .cell-stats *,
.grid-cell[data-cat-id] .grid-cell-footer,
.grid-cell[data-cat-id] .grid-cell-footer * {
  color: var(--cell-ink);
}

/* 說明文與 code 稍微退一階，靠透明度而非另一個顏色 */
.grid-cell[data-cat-id] .cell-desc { opacity: 0.82; }
.grid-cell[data-cat-id] .cell-code { opacity: 0.72; }

/* 格內題數 chip：底色改用同格墨色的透明版，才不會在彩底上浮出白塊 */
.grid-cell[data-cat-id] .cell-stats > *,
.grid-cell[data-cat-id] .grid-cell-footer > *,
.grid-cell[data-cat-id] .count-badge {
  background: var(--cell-chip);
  border-color: transparent;
  color: var(--cell-ink);
}

/* 選中狀態：不靠顏色，用外框 */
.grid-cell[data-cat-id].active {
  outline: 3px solid var(--cell-ink);
  outline-offset: -3px;
}

/* 中央核心格維持紙地，作為八個色塊的留白中心 */
.grid-cell.center-core { background: var(--bg-card); color: var(--text-main); }