/* ============================================================
   tokens.css — 24 Commit 唯一色彩／字級／間距來源
   ------------------------------------------------------------
   【條款 A・強制】
   全專案顏色只在本檔定義一次。
   應用程式碼中禁止出現任何 hex 色碼字面值，
   包含 inline style、JS 常數、SVG、圖示。
   一律使用 var(--token) 參照。

   驗收：除本檔與 manifest.json 外，全 src 掃不到 hex 色碼 → 必須 0 命中。

   【C1 唯一例外・2026-09-10 CC 裁決】
   manifest.json 的 background_color 與 theme_color 兩個欄位。
   ★ 必須恆等於 --color-bg-base，手動同步。

   ------------------------------------------------------------
   v0.1.3 — 對齊 30Flow v8.33 實機結構，主色改由品牌 Logo 取樣。
   來源：GEM 配色規格書 + 30Flow 原始碼 + Logo 實際取色。
   對比度皆經實算，標於各行。
   ============================================================ */

:root {
  /* ---- 畫布（2026-09-11 Sean 選定淺冷藍，取代原本的 30Flow 暖米灰） ----
     色溫由暖翻冷，與品牌藍同源；刻意壓在純白下方約 5%，
     白色卡片才撐得出邊界。邊框與次要文字一併換成冷灰——
     舊的暖色 #D6D2C8／#6E6A62 疊在冷底上會發濁。
     對比實算：次要文字 5.2:1。 */
  --color-bg-base:      #EAF0F8;
  --color-bg-surface:   #FFFFFF;
  --color-border:       #CBD5E1;

  /* ---- 深色實體模組 Pods ---- */
  --color-bg-card:        #171719;
  --color-bg-card-active: #222226;
  --color-bg-card-done:   #2C2C30;
  --color-bg-bar:         #2C2C2E;  /* 底部隨記膠囊，刻意比卡片淺一階 */

  /* ---- 畫布上的文字 ---- */
  --color-text-main:    #1C1C1E;  /* 對比 15.4:1 */
  --color-text-muted:   #5B6472;  /* 對比  5.2:1 */
  --color-text-faint:   #8E8E93;  /* 僅用於大字級標籤，不用於內文 */

  /* ---- 卡片上的文字 ---- */
  --color-oncard-main:  #FFFFFF;  /* 對比 18.9:1 */
  --color-oncard-muted: #8C8C94;  /* 對比  5.4:1 */
  --color-oncard-done:  #7A7A84;  /* 對比  3.3:1 */

  /* ---- 品牌（取自 Logo 實際像素） ---- */
  --color-brand:        #39A9EF;  /* Logo 球體主色 */
  --color-brand-hi:     #88E6FC;  /* Logo 球體高光 */
  --color-brand-deep:   #3182D4;  /* Logo 球體暗面 */
  --color-brand-ink:    #3B3E42;  /* Logo 深色 V */

  /* ---- 左右兩顆圓角方格（說明／設定） ----
     原本 --color-bg-card 的近黑在淺畫布上比主角卡片還搶眼，改成灰。
     ★ 字符維持原本的藍與綠，所以底色不能再淺：
        品牌藍 #39A9EF on #4E5158 實算 3.06:1，已是保持可辨的最淺灰。
        再淺就要把字符換成壓深版，那是另一個決定。 */
  --color-tile:      #4E5158;
  --color-tile-edge: #62666D;
  --color-tile-down: #3E4147;  /* 按下 */

  /* ---- 建立頁六個預設標題的識別底色 ----
     淺色 tint，深色文字直接壓在上面（對比皆 >12:1）。
     刻意不沿用 --day-* 星期色，避免使用者把「主題」誤讀成「星期」。 */
  --chip-1: #FFE3E0;  /* 運動 */
  --chip-2: #DCEEFB;  /* 學習 */
  --chip-3: #DDF3E4;  /* 閱讀 */
  --chip-4: #FFEFD6;  /* 創作 */
  --chip-5: #E8E3F7;  /* 工作 */
  --chip-6: #FFE6EE;  /* 生活 */
  --chip-custom: #ECEFF3;  /* 使用者自訂 */

  /* ---- 訊號 ---- */
  --color-accent:       #1A6FA5;  /* 淺底可點擊訊號・4.6:1（品牌藍壓深版） */
  --color-accent-card:  #39A9EF;  /* 深卡片上的品牌藍・6.9:1 */
  --color-accent-soft:  rgba(57, 169, 239, 0.12);

  /* ---- 四張主頁卡片的識別色 ----
     30Flow 四塊功能對等，故用四個不相干色相。
     24 Commit 的四塊權重不同：今日承諾是主角，設定不該搶視線。
     故採「三強一弱」：今日=品牌藍、紀錄=完成綠、建立=承諾琥珀、設定=靜音灰。 */
  --pod-today:   #39A9EF;
  --pod-record:  #30D158;
  --pod-commit:  #FFB340;
  --pod-setup:   #8C8C94;

  /* ---- 星期識別色（索引同 Date.getDay()：0=日 … 6=六） ----
     一天一個顏色，選星期、打勾與紀錄都用同一組，
     使用者在任何畫面都能一眼認出這是星期幾。 */
  --day-0: #FF453A;
  --day-1: #39A9EF;
  --day-2: #30D158;
  --day-3: #FFB340;
  --day-4: #BF5AF2;
  --day-5: #FF6482;
  --day-6: #FF9F0A;

  /* ---- 時鐘（30Flow 實機取值） ---- */
  --color-clock-face:   #1C1C1E;  /* 指針與數字 */
  --color-clock-tick:   #8E8E93;  /* 細刻度 */
  --color-clock-sub:    #48484A;  /* 日期窗月份 */
  --color-clock-relief: #B6BAC2;  /* 時標的下緣陰影，做出應用式數字的倒角 */
  --color-timer:        #FF453A;  /* 12 點三角、秒針、日期數字、倒數告急 */

  /* ---- 時鐘專屬色（與 --color-timer 分家，改時鐘不會波及提醒／AI 膠囊） ----
     2026-09-11 二度定案：藍色實機看過後判定偏複雜，改回紅色。
     紅是這個 App 的計時色，錶面與外圈共用同一支紅。
     ★ 外環刻度軌道（Chapter Ring）試過後由 Sean 移除，不要再加回來。
     ★ 兩個三角刻意不同形：面盤 12 點＝正三角（尖端朝外），
        外框零位＝倒三角（尖端朝內）。歸零時上下相對，一眼分得出誰是誰。 */
  --color-clock-twelve:  #FF453A;   /* 12 點倒三角 */
  --color-clock-second:  #FF453A;   /* 秒針 */
  --color-clock-datenum: #FF453A;   /* 日期窗數字 */
  --color-clock-core:    #FFFFFF;   /* 軸心內芯 */

  /* ---- 潛水錶外圈（計時器頁） ----
     內盤固定倒三角＝讀數基準，用紅；外框可動倒三角＝倒數目標，用白。
     兩者在歸零時重疊於頂端，一紅一白才分得出誰是誰。
     10 與 30 兩個數字上紅：10 是最常用的短計時，30 是半小時的錨點，
     一眼就能判斷過半沒過半。其餘維持冷白，再多就變吵。
     刻意不做夜光珠／螢光點／發光效果。 */
  --bezel-face:    #1C1F24;
  /* 外圈最外緣是滾花握邊（coin edge），不是刻度——那是水鬼讓人轉得動外圈
     的凹槽。亮金屬底＋較暗的溝槽面，兩色才做得出凹凸，不必用漸層或陰影。 */
  --bezel-edge:    #CBD1D9;
  --bezel-tooth:   #949BA6;
  --bezel-mark:    #D7DBE1;
  --bezel-hot:     #FF453A;
  --bezel-zero:    #FFFFFF;

  /* ---- 計時器讀數 ----
     刻意不用主文字色：純黑的大字會跟錶盤搶主角。冒號再淡一階，
     數字才讀得成一組，而不是兩塊各自為政的數字。 */
  --color-readout:      #5B6472;
  --color-readout-mark: #9AA1AC;
  --color-pip:          #5B6472;  /* 最後 15 秒的光點 */
  --color-pip-out:      #CBD5E1;  /* 已經熄滅的 */

  /* ---- 狀態 ---- */
  --color-done:         #5B6472;
  --opacity-done:       0.55;

  /* ---- 字級階層（條款 B） ---- */
  --font-size-clock:    72px;
  --font-size-display:  44px;
  --font-size-brand:    28px;   /* 2026-09-11 24→28：字串寬約 130px，最窄 320 機仍有 272px 可用，不會擠到下方卡片 */
  --font-size-title:    22px;
  --font-size-body:     16px;
  --font-size-caption:  13px;
  --font-size-micro:    10px;

  /* ---- 間距節奏（條款 B） ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* ---- 圓角（條款 B，對齊 30Flow 實機） ---- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   32px;   /* 30Flow LobbyCard = rounded-[2rem] */
  --radius-bar:  28px;   /* 30Flow 底部隨記膠囊 */
  --radius-pill: 999px;

  /* ---- 版面保留區（底部固定膠囊佔用的高度） ---- */
  --reserve-memo: 78px;
}

@media (max-width: 360px) { :root { --reserve-memo: 74px; } }

/* ============================================================
   Dark Mode
   v1 不實作。將來只需在此加一組覆蓋值，不得改動上方結構。
   ============================================================ */