/* ============================================================
   Design tokens — extracted from styles.css (batch 2, colors only)
   Values are literal copies of what styles.css already used.
   B3 T2 (2026-08-30): 淺色語意角色已加入(見檔尾),舊註解「dark-only」作廢。
   ============================================================ */
:root {
    /* -- B3 T1: 漲跌語意色，值取自 .scratch/vue-migration/mockups/proto.artifact.html :root -- */
    --up: #32D96C;
    --up-bg: rgba(50, 217, 108, 0.12);
    --down: #FF7A72;
    --down-bg: rgba(255, 122, 114, 0.12);

    /* -- B3 T2: 完整語意角色（深色）。只加定義，尚無使用端消費——見 B3-TICKETS.md T2。
       值取自 .scratch/vue-migration/mockups/proto.artifact.html :root。
       注意：bg/surface/surface-2/border/accent 這幾個名字目前也存在於 styles.css 自己的 :root，
       styles.css 在 tokens.css 之後載入、cascade 會覆蓋這裡的同名值——這是預期的（T2 只鋪
       token，換用是 T3 的事），不是這裡寫錯。 -- */
    --bg: #0A0A0B;
    --surface: #151517;
    --surface-2: #1E1E21;
    --border: #2C2C30;
    --border-strong: #3C3C42;
    --text: #F4F2F3;
    --text-2: #D9D6D8;
    --muted: #A3A0A3;
    /* 2026-09-09: --muted 與背景之間缺一層更暗的標籤色。index.html 的 inline 標籤
       原本用 #475569，對比只有 2.61:1（AA fail）；這個值是 5.46:1，過 AA 且與
       --muted(7.65) 仍可辨層級。 */
    --text-3: #8A8589;

    /* 卡片高光與陰影，值取自 proto.artifact.html — 桌機 .glass-card 與手機卡片共用同一套。 */
    --inner-hl: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.75);
    --accent: #E0879B;
    --accent-2: #C06A7E;
    --warn: #F0A93C;
    --warn-bg: rgba(240, 169, 60, 0.12);
    --info: #8AA6C8;
    --on-accent: #101F30;

    /* -- accent / status colors (bare literals, ≥3 occurrences) -- */
    /* 2026-09-09: 供應權轉移到語意 --info（深 #8AA6C8 / 淺 #3A5F8A）。
       原字面 #60a5fa 是亮藍，與手機設計線的藕紅 accent 對比過強；--info 才是
       「可點/資訊」這個角色的定義處，且會跟著 data-theme 走。這是視覺變更不是整理。 */
    --color-info-blue: var(--info);
    --color-accent-blue: #3b82f6;
    --color-danger-red: #EF4444;
    --color-success-green: #10B981;
    --color-buy-gradient-end: #0ea673;
    --color-warning-amber: #f59e0b;
    --color-muted-gray: #94A3B8;
    --color-delete-red: #ff3333;
    --color-delete-red-dark: #cc2929;

    /* -- white alpha overlays (rgba(255,255,255,X), ≥3 occurrences) -- */
    --white-a02: rgba(255, 255, 255, 0.02);
    --white-a03: rgba(255, 255, 255, 0.03);
    --white-a04: rgba(255, 255, 255, 0.04);
    --white-a05: rgba(255, 255, 255, 0.05);
    --white-a06: rgba(255, 255, 255, 0.06);
    --white-a08: rgba(255, 255, 255, 0.08);
    --white-a10: rgba(255, 255, 255, 0.1);
    --white-a12: rgba(255, 255, 255, 0.12);
    --white-a14: rgba(255, 255, 255, 0.14);
    --white-a15: rgba(255, 255, 255, 0.15);
    --white-a18: rgba(255, 255, 255, 0.18);
    --white-a20: rgba(255, 255, 255, 0.2);
    --white-a22: rgba(255, 255, 255, 0.22);
    --white-a25: rgba(255, 255, 255, 0.25);
    --white-a35: rgba(255, 255, 255, 0.35);

    /* -- accent-blue alpha overlays (rgba(59,130,246,X)) -- */
    --blue-a15: color-mix(in srgb, var(--info) 15%, transparent);
    --blue-a20: color-mix(in srgb, var(--info) 20%, transparent);
    --blue-a25: color-mix(in srgb, var(--info) 25%, transparent);

    /* -- black alpha overlays (rgba(0,0,0,X)) -- */
    --black-a30: rgba(0, 0, 0, 0.3);
    --black-a40: rgba(0, 0, 0, 0.4);
    --black-a55: rgba(0, 0, 0, 0.55);

    /* -- success/emerald alpha overlays (rgba(16,185,129,X)) -- */
    --emerald-a15: rgba(16, 185, 129, 0.15);
    --emerald-a20: rgba(16, 185, 129, 0.2);
    --emerald-a25: rgba(16, 185, 129, 0.25);
    --emerald-a30: rgba(16, 185, 129, 0.3);

    /* -- danger/red alpha overlays (rgba(239,68,68,X)) -- */
    --red-a15: rgba(239, 68, 68, 0.15);
    --red-a20: rgba(239, 68, 68, 0.2);
    --red-a30: rgba(239, 68, 68, 0.3);
    --red-a40: rgba(239, 68, 68, 0.4);

    /* -- warning/amber alpha overlay (rgba(245,158,11,X)) -- */
    --amber-a30: rgba(245, 158, 11, 0.3);

    /* -- radius extras not already covered by --radius-xs/sm/md/lg/xl/pill -- */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-11: 11px;
    --radius-12: 12px;

    /* -- transition literals distinct from --transition-smooth -- */
    --transition-default: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --transition-input: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

    /* -- composite shadows built from emerald alpha tokens -- */
    --shadow-buy-sm: 0 4px 12px var(--emerald-a30);
    --shadow-buy-ring: 0 0 0 3px var(--emerald-a25);

    /* -- mobile M2 (2026-08-31): frontend/css/mobile.css 手機殼專屬色票，改讀本檔，只新增不動既有值 -- */
    --mobile-bg-deep: #050506;
    --mobile-surface-solid: #151517;
    --mobile-inner-hl: inset 0 1px 0 var(--white-a06);
    --mobile-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px var(--mobile-shadow-a75);
    --mobile-shadow-a75: rgba(0, 0, 0, 0.75);
    --mobile-accent-soft: rgba(224, 135, 155, 0.12);
    --mobile-vst: #F0A93C;
    --mobile-vst-bg: rgba(240, 169, 60, 0.14);
    --mobile-stale: var(--mobile-vst);
    --mobile-stale-bg: rgba(240, 169, 60, 0.10);
    --mobile-radius-card: 22px;
    --mobile-radius-hero: 30px;
    --mobile-radius-pill: 999px;
    --mobile-hi-text: #fff;
    --mobile-hi-sub: rgba(244, 242, 243, 0.92);
    --mobile-hi-sub2: rgba(244, 242, 243, 0.92);
    --mobile-hi-sub3: rgba(244, 242, 243, 0.92);
    --mobile-hi-cents: rgba(255, 255, 255, 0.78);
    --mobile-hi-chip-bg: var(--white-a14);
    --mobile-hi-chip-border: var(--white-a25); /* 原值 0.24，取最近 alpha token（誤差 0.01） */
    --mobile-hi-pill-bg: var(--white-a20);
    --mobile-hi-pill-text: var(--up); /* 2026-08-29 mobile.css 原註解：對齊 --up */
    --mobile-hi-divider: var(--white-a25); /* 原值 0.30，取最近 alpha token（誤差 0.05） */
    --mobile-hi-divider2: var(--white-a25); /* 原值 0.24，取最近 alpha token（誤差 0.01） */
    --mobile-panel-grad: linear-gradient(158deg, #4A1F27 0%, #6B2A36 42%, #A14C5C 78%, var(--accent-2) 118%);
    --mobile-panel-glow: radial-gradient(120% 90% at 82% -18%, rgba(224, 135, 155, 0.35), transparent 62%);
    --mobile-panel-orb: radial-gradient(closest-side, var(--white-a14), transparent 72%);
    --mobile-panel-shadow: 0 10px 34px -14px rgba(15, 5, 8, 0.85);
    --mobile-page-bg-glow: radial-gradient(130% 62% at 50% -14%, rgba(224, 135, 155, 0.22), transparent 62%);
    --mobile-status-row-border: rgba(255, 255, 255, 0.09);
    --mobile-scrim: rgba(5, 5, 6, 0.62);
    --mobile-sheet-bg: var(--surface-2);
    --mobile-sheet-shadow: 0 -20px 60px var(--black-a55), inset 0 1px 0 var(--white-a08);
    --mobile-grabber: var(--white-a25); /* 原值 0.28，取最近 alpha token（誤差 0.03） */
    --mobile-btn-bg: var(--white-a08); /* 原值 0.07，取最近 alpha token（誤差 0.01） */
    --mobile-skel-1: var(--white-a06);
    --mobile-skel-2: var(--white-a15);
    --mobile-dev-panel-bg: rgba(21, 21, 23, 0.95);
    --mobile-nav-bg: rgba(10, 10, 11, 0.90);
    --mobile-on-accent-text: #101F30;
    --mobile-avatar-text: #221A1E; /* 深色模式無此用法，值不會生效；淺色覆寫見下方 */
    --mobile-coin-default-start: #8ABCD1;
    --mobile-coin-default-end: #1661AB;
    --mobile-coin-default-text: #0A141F;
    --mobile-coin-eth-start: #FDE68A;
    --mobile-coin-eth-end: #F59E0B;
    --mobile-coin-eth-text: #3a2400;
    --mobile-coin-sol-start: #C4B5FD;
    --mobile-coin-sol-end: #7C3AED;
    --mobile-pure-white: #fff;
    /* mobile.css 原本用 rgba(245,165,36,X)（timeout/retry/stale-banner/panel-tag 邊框），
       語意上就是 warn/amber 提示色，改用 --warn 的 rgb(240,169,60) 建對應 alpha token，
       只是統一色票、非改變既有 --warn 定義。 */
    --mobile-warn-a28: rgba(240, 169, 60, 0.28);
    --mobile-warn-a30: rgba(240, 169, 60, 0.30);
    --mobile-warn-a35: rgba(240, 169, 60, 0.35);
    --mobile-warn-a40: rgba(240, 169, 60, 0.40);
}

/* ============================================================
   B3 T2: 淺色語意角色 — 值取自 proto.artifact.html [data-theme="light"]。
   只加定義,尚無使用端消費(消費端仍是 styles.css 自己的 :root,見上方註解)。
   紀律(B3-TICKETS.md 已裁決,勿違反):淺色成套一次落地,絕不允許任何單一元件
   自己加 prefers-color-scheme: light — 這裡是唯一允許出現該 media query 的地方。
   兩個選擇器的值要逐一手抄同一組數值,不用 var() 互相 alias(避免 specificity 問題)。
   ============================================================ */
:root[data-theme="light"] {
    --bg: #FBF7F8;
    --surface: #FFFFFF;
    --surface-2: #F6EFF2;
    --border: rgba(60, 36, 46, 0.14);
    --border-strong: rgba(60, 36, 46, 0.24);
    --text: #221A1E;
    --text-2: #3D2F35;
    --muted: #6A5A62;
    --text-3: #7A6E75;
    --inner-hl: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --card-shadow: 0 1px 2px rgba(34, 26, 30, 0.06), 0 10px 26px -14px rgba(34, 26, 30, 0.22);

    /* 淺色：白疊白等於沒有分隔線/hover 底。改用 ink(#221A1E) alpha，
       係數 0.6 是因為同 alpha 的黑在白底上比白在黑底上重得多。 */
    --white-a02: rgba(34, 26, 30, 0.012);
    --white-a03: rgba(34, 26, 30, 0.018);
    --white-a04: rgba(34, 26, 30, 0.024);
    --white-a05: rgba(34, 26, 30, 0.03);
    --white-a06: rgba(34, 26, 30, 0.036);
    --white-a08: rgba(34, 26, 30, 0.048);
    --white-a10: rgba(34, 26, 30, 0.06);
    --white-a12: rgba(34, 26, 30, 0.072);
    --white-a14: rgba(34, 26, 30, 0.084);
    --white-a15: rgba(34, 26, 30, 0.09);
    --white-a18: rgba(34, 26, 30, 0.108);
    --white-a20: rgba(34, 26, 30, 0.12);
    /* a22 是輸入框邊框（.search-input / .select-input / .number-input）在用的，
       照 0.6 係數會掉到 0.132、低於可視門檻，使用者看不出哪裡可以打字。
       這一個不套係數，取 0.16。 */
    --white-a22: rgba(34, 26, 30, 0.16);
    --white-a25: rgba(34, 26, 30, 0.15);
    --white-a35: rgba(34, 26, 30, 0.21);

    /* 淺色：--black-a* 原本是黑疊白，輸入框之類的凹陷面會變成一條深灰。
       淺色主題的凹陷面應該比卡片更白，改用白 alpha。 */
    --black-a30: rgba(255, 255, 255, 0.75);
    --black-a40: rgba(255, 255, 255, 0.85);
    --black-a55: rgba(34, 26, 30, 0.10);

    /* accent 底上的文字色。深色 accent 是亮藕紅 -> 配深字；淺色 accent 是深紅 -> 配白字。
       值取自 proto.artifact.html 的 .dev-panel button.active。 */
    --on-accent: #FFFFFF;
    --accent: #9E4E68;
    --accent-2: #B4667F;
    --up: #0F7A3D;
    --up-bg: rgba(15, 122, 61, 0.10);
    --down: #C4291D;
    --down-bg: rgba(196, 41, 29, 0.10);
    --warn: #8A5406;
    --warn-bg: rgba(138, 84, 6, 0.10);
    --info: #3A5F8A;

    /* -- mobile M2 (2026-08-31): 淺色覆寫，值取自 frontend/css/mobile.css 原 [data-theme="light"] 區塊 -- */
    --mobile-bg-deep: #F5EEF0;
    --mobile-inner-hl: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --mobile-card-shadow: 0 1px 2px rgba(34, 26, 30, 0.06), 0 10px 26px -14px rgba(34, 26, 30, 0.22);
    --mobile-accent-soft: rgba(158, 78, 104, 0.10);
    /* M2 修正：淺色的實心卡面。搬進 tokens.css 時漏了這一行，會讓淺色主題吃到深色 #151517。 */
    --mobile-surface-solid: #FFFFFF;
    --mobile-vst: #8A5406;
    --mobile-vst-bg: rgba(138, 84, 6, 0.12);
    --mobile-stale-bg: rgba(138, 84, 6, 0.10);
    --mobile-hi-text: #221A1E;
    --mobile-hi-sub: rgba(34, 26, 30, 0.86);
    --mobile-hi-sub2: rgba(34, 26, 30, 0.86);
    --mobile-hi-sub3: rgba(34, 26, 30, 0.86);
    --mobile-hi-cents: rgba(34, 26, 30, 0.80);
    --mobile-hi-chip-bg: rgba(60, 36, 46, 0.06);
    --mobile-hi-chip-border: rgba(60, 36, 46, 0.14);
    --mobile-hi-pill-bg: rgba(15, 122, 61, 0.10);
    --mobile-hi-pill-text: var(--up);
    --mobile-hi-divider: rgba(34, 26, 30, 0.12);
    --mobile-hi-divider2: rgba(34, 26, 30, 0.08);
    --mobile-panel-grad: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 100%);
    --mobile-panel-glow: radial-gradient(120% 90% at 82% -18%, rgba(158, 78, 104, 0.05), transparent 62%);
    --mobile-panel-orb: radial-gradient(closest-side, rgba(158, 78, 104, 0.04), transparent 72%);
    --mobile-panel-shadow: 0 0 0 1px rgba(60, 36, 46, 0.14), 0 10px 30px -14px rgba(60, 36, 46, 0.18);
    --mobile-page-bg-glow: radial-gradient(130% 62% at 50% -14%, rgba(158, 78, 104, 0.06), transparent 62%);
    --mobile-status-row-border: rgba(34, 26, 30, 0.10);
    --mobile-scrim: rgba(34, 26, 30, 0.42);
    --mobile-sheet-bg: #FFFFFF;
    --mobile-sheet-shadow: 0 -20px 60px rgba(34, 26, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --mobile-grabber: rgba(34, 26, 30, 0.22);
    --mobile-btn-bg: rgba(34, 26, 30, 0.05);
    --mobile-skel-1: rgba(34, 26, 30, 0.06);
    --mobile-skel-2: rgba(34, 26, 30, 0.14);
    --mobile-dev-panel-bg: rgba(255, 255, 255, 0.97);
    --mobile-nav-bg: rgba(255, 255, 255, 0.92);
    --mobile-avatar-text: #FFF3F7;
}

/* 2026-08-30 裁決：原本這裡還有一份 @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){...} }
   包裹，撤掉了 —— :root:not([data-theme="dark"]) 的 specificity 高於 styles.css 自己的 :root，
   會蓋掉 styles.css 既有的深色 --bg/--surface/--surface-2/--border/--accent，
   在沒人設定 data-theme、系統偏好為淺色時把整站拖成淺色（已用 pixel diff 截圖抓到）。
   「跟隨系統」的淺色支援留給 T4（主題切換）處理，這裡只保留
   [data-theme="light"] 明確選淺色的精確匹配版本。
   2026-08-30 T3-1：選擇器改成 :root[data-theme="light"]（specificity 0,2,0），
   蓋過 styles.css 裸 :root（0,1,0），不受兩檔載入順序影響；值未動，
   現況無人設定 data-theme，故本刀不觸發任何畫面變化。 */