/* Design tokens: brand palette, themeable surfaces, shadows, radii.
 *
 * The defaults below describe the Midnight theme — a near-black canvas with a
 * violet accent. Everything a theme can change is a custom property set by
 * applyTheme(), so the whole app follows a preset (or a player's own four
 * colours) without a single hard-coded hex outside this file. The exceptions
 * are deliberate: the card illustrations in js/core/art.js carry their own
 * fixed palettes, the way a book cover does.
 */
:root {
    /* Brand palette (myVoice speech-bubble colors) — the content hues. They
       name the game categories and never change with the theme. */
    --sky: #4FB3DC;
    --sky-strong: #2E8AB0;
    --coral: #F0846A;
    --coral-soft: #F6C9B6;
    --mint: #4FC08D;
    --sun: #F4B942;

    /* Access-method hues. Each mode keeps one colour everywhere it appears —
       the tab, the card strip, the welcome tile — so "the teal one" is a
       reliable way to refer to switch access. */
    --touch: #A78BFA;
    --switch: #34D8C0;
    --gaze: #5AA9FF;
    --speak: #FFC44D;

    /* Themeable surface tokens (set by applyTheme) */
    --bg: #0A0B0F;
    --bg-tint-1: rgba(124, 92, 255, 0.20);
    --bg-tint-2: rgba(255, 196, 77, 0.10);
    --bg-tint-3: rgba(79, 179, 220, 0.12);
    --surface: #121319;
    --surface-2: #1A1C24;
    --primary: #7C5CFF;
    --primary-strong: #5B3FD6;
    /* Primary is a fill colour; on a dark canvas it is a shade too deep to read
       as text, so headings and links use the tint instead. */
    --primary-ink: #A896FF;
    --accent: #FFC44D;
    --dice: #9C86FF;
    /* A die reads as a die because it has a light face and dark pips. On a dark
       theme the surface colour gives neither, so the face is derived from
       --dice instead of inherited from the panel. */
    --die-face: #EDEAFF;
    --die-pip: #362B63;

    /* Derived readability tokens (set by applyTheme) */
    --ink: #F1F3F9;
    --ink-dim: #A3AAB9;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.20);
    --hold: #42D19B;

    /* Scan / focus highlight */
    --scan-ring: #FFC44D;
    --scan-glow: rgba(255, 196, 77, 0.45);

    /* Shadows read as depth on a light canvas and as separation on a dark one,
       so the dark themes lean on the hairline borders instead and keep these
       soft. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.48);

    --radius: 20px;
    --radius-sm: 14px;
    --radius-pill: 999px;

    /* Layout accommodations (set by applyVisual).
       --ui-scale zooms the whole app; --safe-inset keeps controls off the very
       edge of the display, where eye-gaze tracking is least accurate. */
    --ui-scale: 1;
    --safe-inset: 3%;
    /* Zoom-compensated viewport height. `zoom` resolves vh against the unzoomed
       viewport and then scales the result, so a plain `10vh` grows by the zoom
       factor at exactly the moment there is less room for it. Layout sizes use
       `calc(N * var(--vh))` instead, which stays a fixed share of the app box at
       any Overall size setting. */
    --vh: calc(1vh / var(--ui-scale, 1));
}