:root {
      /* ═══ 左側 + 共用 ═════════════════════════════════════════════ */
      --bg-page: #fafafa;   /* outer canvas — near-white (was #f8f8f8) */
      --bg-panel: #fdfcfb;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      --line: rgba(112, 116, 126, 0.07);

      /* === Radii & Elevation ===
         The "feel" knobs that drive 高級感 as much as hue does. A scene
         tightens/loosens the radius scale and softens/deepens the shadow
         scale to change the whole app's character at once. main.css's
         ad-hoc radii (6/8/10px → sm, 12/14 → md, 16/18 → lg, 20/22/26/28 →
         xl) and shadows were snapped onto these scales. */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 22px;
      --radius-pill: 999px;                        /* fully-rounded pills */
      --radius-full: 50%;                          /* circles (avatars, mic btn) */
      --radius-bubble: 20px;                       /* chat bubble corner (its own knob) */

      --shadow-bubble: 0 2px 3px rgba(0, 0, 0, 0.06);  /* bubble lift */
      --shadow-btn: 0 1px 3px rgba(0, 0, 0, 0.10);     /* mic/send button lift */
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);      /* cards / chips */
      --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10);     /* raised controls / hovers */
      --shadow-lg: 0 10px 26px rgba(0, 0, 0, 0.10);    /* popovers / dropdowns */
      --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18); /* modals / overlays */

      /* === Brand (teal) ===
         One source of truth for the brand teal + its darker/mid variants.
         The phone frame, send button and Go button all reference --brand,
         so a scene re-brands the whole app by changing these three lines. */
      --brand: #0097b9;
      --brand-deep: #016a82;
      --brand-mid: #007a96;
      --title: var(--brand-deep);   /* main dashboard title ("Welcome to …") */

      /* === Phone Frame & Buttons === */
      --phone-frame: var(--brand);
      --send-btn: var(--brand);
      --my-go-btn-color: var(--brand);
      --my-go-btn-hover: #a6a6a6;
      --record-btn-bg: #ffffff;                    /* mic button idle background */

      /* 手機框 */
      --frame-border: 1px solid var(--phone-frame); /* ← active: teal frame */
      /* --frame-border: 1px solid rgba(0, 0, 0, 0.04); */  /* near-invisible hairline */
      /* --frame-border: none; */                            /* no line — pure shadow float */

      /* === Dashboard header  */
      --header-bg: #017a96;
      --header-margin: -10px -14px 12px;            /* bleed to the panel edges */
      --header-pad: 18px 16px 18px;
      --header-ink: #ffffff;                        /* title on the bar */
      --header-ink-soft: rgba(255, 255, 255, 0.85); /* subtitle on the bar */
      --header-chip: rgba(255, 255, 255, 0.18);     /* nana pill on the bar */
      --header-chip-ink: #ffffff;

      /* === Text === */
      /* Body text on white bubble — softened from #333 (12.6:1 contrast,
         AAA+ but slightly harsh for long-form reading) to #4A4A4A (9.7:1,
         still AAA, easier on the eyes). Keeps a clear gap above --soft
         #555 (7.7:1) which is used for phrase-translation / secondary
         text, so the hierarchy stays distinct: body > soft > subtle. */
      --text-strong: #1f2937;   /* headings / strongest text (snapped: #1a1a1a, #374151) */
      --text-body: #4A4A4A;
      --text-primary: #3b3b3b;
      --ink: #4A4A4A;
      --soft: #555;             /* secondary text (snapped: #4b5563) */
      --text-muted: #8b7d76;
      --text-subtle: #6b7280;   /* tertiary / labels (snapped: #666) */
      --text-faint: #9ca3af;    /* faintest meta text */
      --status: #b38479;
      --debug: #8a8f98;

      /* === Accent / Brand === */
      --accent: #a85a3c;
      --orange: #e26b3e;
      --orange-deep: #b94b22;
      --gold: #c89a2e;
      --bulb: #f4a261;

      /* === Brick-red accent family ===
         Used across L3 retry-flash bubble, retry prefix label tint,
         dashboard user name-tag (nana chip), and L1/L2/L5 .target-phrase
         text accent. Centralised so the "this is the learner's recall
         color" signal stays consistent. */
      --brick-red: #a83232;       /* text accent — name tag, retry label, target-phrase */
      --brick-red-wash: #fbe5e5;  /* pale wash — name tag bg, retry-flash bubble bg */

      /* === Meta-info gray ===
         Floating prefix labels above bubbles (Your turn / Try again /
         NPC speaker name) and score-feedback floating text. Soft warm
         gray reads as "this is meta-info, not bubble content". */
      --meta-gray: #8a8079;

      /* === Forest / Teal family === */
      --forest: #285b53;
      --forest-deep: #1d5e55;
      --forest-mid: #2f6f62;
      --correct: #3a7d44;


      /* 左側 Warning (Firefox) === */
      --warning-bg: #e3d1dd;
      --warning-border: #c9b0c3;

      /* 左側 Alert banner (generating lesson） */
      --alert-bg: #5a8499;                       /* slate-teal */
      --alert-ink: #ffffff;
      --alert-border: rgba(20, 70, 90, 0.22);

      /* 左邊 "You:" user chat bubble */
      --dog: #ffffff;
      --user: #e7f7fa;   /*背景 */
      --user-ink: #1c5566;          /* 深 teal 字 */
      --user-frame: #a9d2db;        /* 淺 teal 細框 */
      --user-glow: rgba(1,122,150,0.22);  /* teal 光暈 */

      /* 左側 🎧 耳機鈕 */
      --vocab-btn-bg: #f5f5f7;      /* 🎧 vocab button idle — neutral light grey */
      --vocab-btn-active: #e1e1e4;  /* 🎧 pressed — a step darker */
      --vocab-btn-current: #d2edf4; /* 🎧 for the current target phrase — pale teal (a touch darker) */

      /* === Surfaces & Borders === */
      --white: #ffffff;             /* white SURFACES (cards, phone, panels) — a dark scene flips this */
      --on-brand: #ffffff;          /* TEXT on coloured/brand elements — stays light even in dark */
      --field-bg: rgba(255, 255, 255, 0.98);  /* select / text-input surface */
      --composer-bg: linear-gradient(180deg, rgba(250, 247, 243, 0.18), rgba(247, 244, 240, 0.94)); /* composer + footer strip */
      --border: #e5e7eb;            /* hairline borders (snapped: #d4d4d4) */
      --surface-alt: #f9fafb;       /* faint grey panel (snapped: #f3f4f6) */
      --surface-warm: #fffaf3;      /* warm off-white panel (snapped: #f0ede9) */

      /* 右邊 This Topic Level  */
      --panel-bg: #e9eaed;             /* stat-card panel — neutral grey */
      --panel-ink: var(--text-primary); /* stat value text #3b3b3b */
      --section-title: #4f7785;        /* dashboard section labels (Key Pattern / Grammar / Cultural Tip) — slate-teal */

      /* === Chips & Surfaces === */
      --chip-warm: #ede4ea;
      --chip-green: #eef7f4;
      --input-bg: #e9eaed;          /* bottom "Type here…" input pill — neutral grey */


      /* === Functional === */
      --recording: #ff4d4d;
      --mic-hint-glow: rgba(255, 105, 180, 0.45);  /* "ready to record" pulse halo on the mic */
      --complete-bg: #e0934a;                      /* topic-complete summary pill — warm gold */
      --complete-ink: #ffffff;                     /* topic-complete summary text — white */
      --topic-head: #b85c4a;                       /* topic-modal section headings */
      --topic-chip-ink: var(--forest-deep);        /* topic-modal chip (topic name) text */
    }