/* ── Foundations ──────────────────────────────────────────────────────────
   Every value the interface is allowed to use. Nothing below this file may
   invent a colour, a size, or a duration.

   The system has one idea: a circuit is the only ornament. So there are no
   gradients, no shadows, no textures. Depth is carried by a single hairline and
   two surfaces; emphasis is carried by exactly one accent. Everything else is
   neutral, and the neutrals are warm on paper and cold in the dark, because
   that is what those materials do.

   Layers:
     · primitives  — raw values, named for what they are
     · semantics   — named for what they mean; the only names components use
     · themes      — remap the semantics, never the components                */

:root {
  /* Safe-area insets, routed through vars so the Android shell can inject the
     REAL values: Android WebView reports env(safe-area-inset-*) as 0 even
     edge-to-edge (gesture nav is not a display cutout), so MainActivity feeds
     the window insets into these. Browsers and iOS just use env(). */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* ── type ─────────────────────────────────────────────────────────────
     Two families. DM Sans carries prose; JetBrains Mono carries every label,
     number and identifier — anything the circuit itself would call a name.  */
  /* GAZETTE EXPERIMENT (morning-paper RnD): serif display + system mono.
     Originals saved in game-nav-rnd/fonts-backup-tokens.txt — restore those
     two lines to revert. */
  --font-sans: "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* A minor-third-ish ramp, floored where mono stops being legible (9px). */
  --text-2xs: 9px;    /* mono eyebrows, table day names */
  --text-xs:  10px;   /* mono buttons, captions */
  --text-sm:  11px;   /* mono labels, nav titles */
  --text-md:  12px;   /* mono data, table cells */
  --text-base: 13px;  /* prose */
  --text-lg:  14px;   /* body default, card titles */
  --text-xl:  16px;   /* panel headings */
  --text-2xl: 22px;   /* sheet headings, chapter glyphs */
  --text-3xl: clamp(26px, 5vw, 38px);   /* the logotype */

  --leading-tight: 1.25;
  --leading-body:  1.55;
  --leading-prose: 1.62;

  /* Mono labels are tracked out; prose is not. */
  --tracking-label: 0.14em;
  --tracking-wide:  0.16em;
  --tracking-title: 0.26em;
  --tracking-none:  0;

  /* ── space ────────────────────────────────────────────────────────────
     A 4px grid. Named by step, not by intent, so a component may choose.   */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 44px;
  --space-11: 64px;

  /* ── layout ───────────────────────────────────────────────────────────
     The content column. Every full-page list — the hub, the game homes, the
     arena screens — is this wide and centred, so a desktop window reads as one
     column rather than a different width per screen. Boards and full-bleed
     surfaces (a match, a puzzle) opt out; they are sized by the board itself.  */
  --wrap: 640px;

  /* ── shape ────────────────────────────────────────────────────────────  */
  --radius-sm: 4px;    /* cells, chips */
  --radius:    6px;    /* buttons, tiles, panels */
  --radius-lg: 10px;   /* sheets */
  --radius-full: 50%;

  --hairline: 1px;     /* the only border width in the system */
  --stroke: 1.5;       /* icon stroke, unitless for SVG */

  /* the daily heatmaps' "current heat colour" channel — each per-difficulty
     block sets --hc inline to var(--ring-easy|medium|hard); declared here with a
     neutral default so the rules that read it are never undefined */
  --hc: var(--dim);

  /* an avatar flame-frame's glow colour, set inline per avatar to its frame's
     hue (see src/ui/arena/avatars.js); declared so the rule never dangles */
  --fr: var(--accent);

  /* the game-home material contract — a game with a material sets these inline to
     its own tokens; the defaults fall back to the app field. --f is a pip's fill
     fraction, set inline per chapter. Declared here so the rules never dangle. */
  --gh-paper: var(--bg);
  --gh-ink: var(--text);
  --gh-line: var(--line);
  --gh-pop: var(--accent);
  --f: 0%;

  /* a puzzle board's side length in cells — a default the board components
     override per level (queens, pipes), declared here so it is a real token */
  --n: 8;

  /* ── control sizes ────────────────────────────────────────────────────  */
  --control-sm: 26px;
  --control:    34px;
  --control-lg: 40px;   /* the prominent top-bar back button */
  --icon-sm: 12px;
  --icon:    16px;
  --icon-lg: 22px;

  /* ── motion ───────────────────────────────────────────────────────────
     One curve. It leaves fast and arrives slowly, like a switch being thrown. */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-1: 0.14s;   /* state change: hover, selection */
  --duration-2: 0.18s;   /* entrance: sheet */
  --duration-3: 0.3s;    /* celebration: stars */
  --duration-page: 0.34s;   /* one screen giving way to another */
  --t: var(--duration-1) var(--ease);
  --qd: 0ms;   /* default per-cell delay for Queens' auto-mark ripple; set from JS */
  --mo-d: 0ms; /* default per-cell delay for Mosaic's wave fill; set from JS */
  /* Pipes' per-pipe water flow, all set from JS per cell/arm: the two dash ends
     an arm draws between, and the per-arm-half / disc durations. */
  --df: 56;
  --dt: 0;
  --pipe-half: 60ms;
  --disc-dur: 40ms;
  /* Bonds' bond-draw flow, set from JS per line: the dash offset a bond draws
     from (sign picks the end), and the slide a doubling bond nudges by. */
  --bo-df: 0;
  --bo-tx: 0;
  --bo-ty: 0;

  /* ── daily-streak flame ───────────────────────────────────────────────
     A gold Lottie flame, hue-rotated per tier; theme-independent (a flame reads
     as a flame in either theme). --flame-glow is the warm glow the bright tiers
     wear (rotated to the tier's colour with the flame), --flame-ink the day
     number, --flame-size the width (set inline per tier). */
  --flame-glow: #ff9a3c;
  /* one representative colour per tier, for the daily-win celebration's zone
     burst + caption (the flame itself is hue-rotated, not token-coloured). */
  --flame-green: #3fb950;
  --flame-red: #ff6a3d;
  --flame-gold: #ffb224;
  --flame-purple: #a371f7;
  --flame-ink: #fff;
  --flame-ink-edge: rgba(0, 0, 0, 0.5);
  --flame-shield-fill: #cfe6ff;
  --flame-shield-line: #2b6cb0;
  --flame-size: 28px;
  /* current tier colour for the celebration zone-burst; set inline per win. */
  --zone: var(--flame-gold);

  /* Tower's six ball colours are declared per theme, further down — see the
     note there. They used to sit here in :root, "fixed in either theme", which
     made Tower the only game whose signature colours ignored the theme switch. */
  /* Tower geometry + the per-element helpers set by tower.css/JS. */
  --to-ball: 40px;   /* a guess ball / dock chip */
  /* the clear / submit / pegs side columns. Wide enough for the peg tray to sit
     3-per-line: 3×12 + 2×3 gaps + 8 padding. The tray has a FIXED socket count,
     so a 3+2 wrap is a stable grid rather than the ragged break it used to be
     when only the scoring pegs were drawn and the wrap point moved per row. */
  --to-side: 56px;
  --to-cur: transparent;  /* a ball's current colour (set per .to-c* class) */
  --to-i: 0;              /* a secret ball's reveal index (set inline) */

  /* Nonogram geometry — all set on .no-hold by nonogram.js to fit the stage. */
  --no-cell: 24px;        /* a grid cell / clue track */
  --no-cols: 5;           /* board columns */
  --no-rows: 5;           /* board rows */
  --no-lg: 40px;          /* left clue gutter width */
  --no-tg: 40px;          /* top clue gutter height */
  /* The every-fifth divider and the frame. 3px, because the ledger board has no
     clue pills and no rounded frame — the divider is the only furniture left, so
     it has to carry the counting on its own. Snap used to read this token too;
     it has its own --sn-edge-w now, so this is Nonogram's alone. */
  --no-edge-w: 3px;
  /* KenKen geometry — set on .kk-hold by kenken.js; heavy/thin lattice inks. */
  --kk-cell: 44px;
  --kk-n: 4;
  --kk-mn: 5;
  --kk-heavy: var(--text);
  --kk-thin: var(--line-2);
  /* Skyscrapers geometry — set on .sky-hold by skyscrapers.js. */
  --sky-cell: 30px;
  --sky-n: 5;
  /* Lights Out geometry — set on .lo-hold by lightsout.js. */
  --lo-cell: 44px;
  --lo-gap: 8px;
  /* the number-palette drag ghost's drop shadow (numgrid.css). */
  --ng-ghost-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  /* The rules a cell draws on itself — colour and weight per side, re-set by
     .no-r / .no-b / .no-br / .no-bb. Declared here for the same reason --to-cur
     and --bo-tx are: the linter proves every var() resolves, and a helper set
     per-element is still a var() someone can typo. */
  --no-rule-r:  transparent;
  --no-rule-b:  transparent;
  --no-rule-rw: 1px;
  --no-rule-bw: 1px;
  --mc: 5;                /* level-thumbnail sample columns (set inline) */
  --mr: 5;                /* level-thumbnail sample rows (set inline) */
  --sn-cell: 40px;        /* Snap grid cell (set on .sn-board by snap.js) */
  --sn-edge-w: 2px;       /* Snap's board frame (was borrowed from --no-edge-w) */
  --c: 5;                 /* Snap thumbnail cols (set inline) */
  --r: 5;                 /* Snap thumbnail rows (set inline) */

  /* Replay (src/ui/arena/replay.js). The stage is letterboxed to the ASPECT the
     board was RECORDED at — normalised coordinates only land on the right cells
     inside a box of the right shape — and the scrub fill is driven from the
     playhead. Both are set from JS per frame; these are only the defaults for a
     stage with nothing on it yet. */
  --ar-a: 0.75;           /* recorded board aspect (w/h) */
  --ar-pos: 0%;           /* the playhead, along the scrub track */

  /* ── layers ───────────────────────────────────────────────────────────  */
  --z-panel: 2;
  --z-chrome: 3;
  --z-veil: 60;
  --z-toast: 70;
  --z-ghost: 90;
}

/* ══ dark — the default, because a lit lamp needs somewhere to be lit ════ */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces, from furthest to nearest */
  --bg:        #0c0d0f;
  --surface:   #141619;
  --surface-2: #1a1d21;
  --raised:    #202429;

  /* the hairline, and the hairline that means "this one matters" */
  --line:      #22262b;
  --line-2:    #2e343a;

  /* Nonogram board — a crisp pen-on-paper grid that reads in either theme. */
  /* Nonogram — Aida cloth and a single skein of madder red. The fills are
     thread, so a finished picture reads as a sampler rather than a chart: the
     one palette where the picture looks made rather than solved. The ink is the
     only chroma on the board; everything else is linen and its weave. */
  --no-paper:  #241d18;   /* board face — the cloth */
  --no-grid:   #3d322a;   /* thin per-cell line — the weave */
  --no-block:  #9a7f68;   /* thick every-fifth divider + frame */
  --no-ink:    #d4574b;   /* a filled cell — the thread */
  --no-head-bg: #33291f;  /* a clue pill (unused by the ledger board) */
  /* Skyscrapers — the city grid: cell face, grid lines, board edge. */
  --sky-paper: #16181d;
  --sky-line:  #2b3037;
  --sky-frame: #3a414a;
  --sky-given: var(--text);
  --sky-entry: var(--accent);
  /* KenKen — the player's own digits (math blue) and a broken-rule flag. */
  --kk-math: #4b93ff;
  --kk-bad:  #e5484d;
  /* Lights Out — a dead-panel off light; lit rides the accent. */
  --lo-off:  #0d0f13;
  --lo-lit:  var(--accent);

  /* Tower — the snooker set: cue-white, yellow, pink, green, blue, brown, in
     resin on baize. A reminder that snooker colours were chosen for a 1969 TV
     camera and not for eyes: green-vs-brown is the sport's own famous
     protanopia failure, and this set's worst deuteranopia pair is ΔE 18.2.
     It survives that because a ball's identity is carried by its CUT as much as
     its colour (src/games/tower/gems.js) — the colour is a second channel here,
     not the only one. Retint freely; do not make them all one shape.
     The dark theme lifts the black ball out to a cue-white; light does the
     reverse, which is why these are not the same in both themes. */
  --to-c0: #eae3d2;
  --to-c1: #f0c53f;
  --to-c2: #ef92ab;
  --to-c3: #45a05c;
  --to-c4: #3f6fc9;
  --to-c5: #8a4a24;

  /* Snap — a transit diagram: one saturated line on a neutral field, the
     checkpoints as interchange plates. Snap used to own exactly one token
     (--sn-path) and borrow its board face, grid and frame from Nonogram, so
     restyling either game silently restyled the other. These are its own. */
  --sn-path:    #ff5f45;  /* the cord */
  --sn-spine:   #ffb3a4;  /* the highlight down it — what makes it read round */
  --sn-node:    #e9edf2;  /* the plate's ring + numeral */
  --sn-paper:   #171c24;  /* board face */
  --sn-grid:    #4c5666;  /* the lattice dots — bright enough to state the grid */
  --sn-frame:   #59626e;  /* the board edge */

  /* LITS — the "Letters" board: black-and-white, cells grey, each tetromino
     coloured by its shape only once its region forms a valid piece. */
  --lits-paper: #34373c;  /* empty cell face */
  --lits-grid:  #26282d;  /* thin cell lattice */
  --lits-wall:  #0e0f11;  /* heavy region edge + board outline */
  --lits-ink:   #9aa0a6;  /* crossed-cell mark */
  --lits-I: #4fa3ff;      /* the four free tetrominoes, one hue each */
  --lits-L: #ff8f4f;
  --lits-T: #57c98a;
  --lits-S: #c98af2;

  /* Shikaku — clued rectangles, each filled a soft tint cycled from the Flood
     palette; the clue number reads on any fill. */
  --sk-paper: #26282c;    /* empty cell face */
  --sk-grout: #17181b;    /* the board behind the tiles — the gaps between cells */
  --sk-cell:  #2f3237;    /* a rounded tile face */
  --sk-grid:  rgba(0,0,0,.22);
  --sk-wall:  #0f1113;    /* rectangle edges + board outline */
  --sk-num:   #f4f1e8;    /* the clue numeral */
  --sk-t0: #a8564a;  --sk-t1: #b8894a;  --sk-t2: #5f938c;  --sk-t3: #5a7db0;
  --sk-t4: #8f8a7a;  --sk-t5: #7d6b92;  --sk-t6: #a85f74;

  /* Sets — jewellery cards: gem pendants (their own vivid hues) on paper cards
     with a gold selection ring. */
  --sx-paper:   #20242e;   /* item card face */
  --sx-paper-2: #262b36;   /* mini-card inner */
  --sx-ink:     #e7e9ee;   /* card text */
  --sx-line:    #363c48;   /* card / slot border */
  --sx-sel:     #d9a441;   /* gold selection ring */
  --sx-slot:    rgba(217, 164, 65, 0.40);  /* empty-slot dash */
  --sx-good:    #3fb27a;   /* hint pulse + filled pip */

  /* text, from loudest to quietest */
  --text:      #e6e9ec;
  --dim:       #9aa0a6;
  --mute:      #5f666d;

  /* the one accent */
  --accent:      #ffb224;
  --accent-hi:   #ffc352;
  --accent-dim:  rgba(255, 178, 36, 0.10);
  --accent-line: rgba(255, 178, 36, 0.42);
  --on-accent:   #17140c;

  /* Signal colours. Held in reserve: the interface derives its danger and
     success states from them, and the board's palette mirrors them. */
  --red:   #f0603f;
  --green: #7fd15a;
  --cyan:  #4ec9e0;

  --danger-line:  rgba(240, 96, 63, 0.5);
  --danger-text:  #ffb8a6;
  --success-line: rgba(127, 209, 90, 0.5);
  --success-text: #cdefb8;
  --over:         rgba(240, 96, 63, 0.4);
  --over-text:    #f2a08c;

  /* Progress rings (Apple-fitness style): the three daily difficulties, easy →
     hard, borrow the signal palette. */
  --ring-easy:   var(--cyan);
  --ring-medium: var(--green);
  --ring-hard:   var(--red);
  --ring-track:  0.3;          /* opacity of a ring's dim under-track */

  --veil:  rgba(6, 7, 8, 0.8);
  --focus: var(--accent);
  /* the shimmer across a working button: a lightening in the dark … */
  --sweep: rgba(255, 255, 255, 0.35);

  /* Queens is a riso print, and unlike the other boards it follows the theme:
     here, fluoro spot inks laid on charcoal stock. The ink stays near-black in
     both themes — it is the stock and the inks that change — so the crown reads
     the same either way. Nine tints, because a board has exactly n regions and
     n never exceeds 9; see src/games/queens/palette.js. */
  --q-ink:      #17140f;
  --q-ink-soft: rgba(23, 20, 15, 0.45);
  --q-edge:     #0f0d0b;
  --q-grid:     rgba(0, 0, 0, 0.22);
  /* loud, because the ink it has to differ from is already near-black */
  --q-cross:    #e01b3d;
  --q-r0:       #ff4f8b;
  --q-r1:       #ff8a3d;
  --q-r2:       #e8d23d;
  --q-r3:       #4fb06a;
  --q-r4:       #2f9ea8;
  --q-r5:       #3d7cc9;
  --q-r6:       #6f5fb8;
  --q-r7:       #b95bb0;
  --q-r8:       #d94f57;

  /* Pipes — copper tube carrying patina-green water, and one of the two boards
     that follows the theme: dark stock with bright copper in the dark, warm
     paper with oxidised copper in the light. Warm everywhere the pipe is, cold
     everywhere the water is, so the two never compete for the same read. */
  --pi-paper:   #1c1714;
  --pi-ink:     #d99a5c;
  --pi-frame:   rgba(217, 154, 92, 0.32);
  --pi-water:   #67c2b6;
  --pi-leak:    #e8734f;
  --pi-lock:    rgba(217, 154, 92, 0.12);

  /* Bonds — a drafted valence diagram: white-blue ink on prussian stock. The
     two state colours are the only warmth on the board, which is what lets a
     satisfied atom read instantly against all that blue. */
  --bo-paper:  #0d2745;
  --bo-ink:    #d6e8ff;
  --bo-frame:  rgba(214, 232, 255, 0.34);
  --bo-atom:   #123a63;
  --bo-sat:    #6fe3a8;
  --bo-over:   #ff8e6a;

  /* Mambo — slate and shell on a kaya goban. The most legible two-kind system
     ever devised, and the original two-kinds-on-a-grid game: the pair separates
     on pure LIGHTNESS against mid-tone wood, so hue does nothing at all and a
     colour-blind player loses nothing. It replaced a blue tile with a circle
     and a green tile with a square — shapes typed into a spreadsheet, the one
     board in the app with no material to it. */
  --ma-paper:  #4a3728;   /* the board: kaya, kept mid-tone in BOTH themes so
                             the stones can stay black and white */
  --ma-ink:    #f0e6d6;
  --ma-frame:  rgba(15, 10, 5, 0.6);
  --ma-grid:   rgba(28, 20, 12, 0.75);
  --ma-given:  rgba(28, 20, 12, 0.28);
  --ma-hover:  rgba(240, 230, 214, 0.06);
  --ma-mark:   #d8cbb4;
  --ma-bad:    #ff6b4a;
  --ma-edge:   #1e150e;
  --ma-cell-a: #16120e;   /* slate */
  --ma-cell-b: #e9e2d4;   /* shell */
  --ma-fig:    #16120e;

  /* Mosaic — clay, straw, bone, sage, delft, ink: low-chroma counters out of a
     wooden box. They separate by LIGHTNESS rather than by chroma, and that is
     the whole point. Mosaic is the one game where the palette IS the mechanic,
     so two colours a player cannot tell apart is not an aesthetic problem — it
     is a board that cannot be finished. The six vivid hues these replaced all
     sat at one lightness and collapsed to a worst pair of ΔE 5.2 under
     protanopia (below ~15 is a coin-flip); this set scores 24.7 protan / 28.5
     deutan. Keep the L* ladder if you ever retint them. */
  --mo-c0: #a8564a;   /* clay   */
  --mo-c1: #cfa963;   /* straw  */
  --mo-c2: #e8e4d8;   /* bone   */
  --mo-c3: #6a9c96;   /* sage   */
  --mo-c4: #5f83b5;   /* delft  */
  --mo-c5: #3a3038;   /* ink    */
  --mo-grout: #232529;

  /* Game marque-icon tiles (src/ui/game-icons.js). Only the paper tile + its
     neutral ink follow the theme — a dark tile in the dark, so a cream chip
     doesn't glare; the vivid puzzle motifs stay fixed in both. */
  --gi-face:  #23272f;   /* the tile face — lighter than --bg so it reads raised */
  --gi-inset: #2c313a;   /* panels a motif sits on (mambo board, sets card…) */
  --gi-ink:   #e6e0d2;   /* strokes, grid partitions, numbers */
  --gi-grid:  #454c56;   /* faint interior grid lines */
  /* The hairline around a tile, catching the light off its top edge. This was a
     raw #ffffff14 in the JS — a white glaze, which does nothing on a pale face,
     so every light-theme tile lost its edge. It has to flip like anything else. */
  --gi-edge:  rgba(255, 255, 255, 0.08);

  /* ── arena ────────────────────────────────────────────────────────────
     Avatars are a disc in one of eight hues carrying a flat mark. They are an
     IDENTITY, so unlike a board they must stay recognisably the same colour in
     both themes — these shift only enough to hold their contrast against the
     field. --av-ink is the mark on the disc; --av-edge its hairline. */
  --av-1: #e0574f;   --av-2: #e08a3c;   --av-3: #d7b13a;   --av-4: #6bb05a;
  --av-5: #45b0a4;   --av-6: #4d8ed6;   --av-7: #8a72d4;   --av-8: #d16aa8;
  --av-ink:  #14161a;
  --av-edge: rgba(255, 255, 255, 0.10);

  /* The two sides of a match. `mine` rides the accent (it is the player's own
     colour everywhere else in the app); `theirs` is the cool counterpart so a
     scoreboard reads at a glance without depending on position alone. */
  --vs-mine:   var(--accent);
  --vs-theirs: var(--cyan);
  --vs-win:    var(--green);
  --vs-lose:   var(--red);
  --vs-live:   rgba(255, 178, 36, 0.12);   /* the "your turn" wash */
  /* The phase clock's empty track where it sits ON the accent (the Ready
     button): an accent track on an accent fill is invisible, so it darkens. */
  --vs-clock-track: rgba(0, 0, 0, 0.18);

  /* Avatar frames — the achievement tiers. An IDENTITY, so like the avatar hues
     they only shift enough to hold in both themes. Metals then the three flames. */
  --frame-bronze: #cd8b4f;
  --frame-silver: #c9d1d9;
  --frame-gold:   #ffcf4a;
  --frame-blue:   #4ec9e0;
  --frame-red:    #ff6a3d;
  --frame-purple: #a371f7;
}

/* ══ light — paper. The same flatness, not a photo negative ══════════════
   Amber is darkened until it can be read on white; the glow becomes nothing,
   because on paper a glow is only grime.                                    */

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #fbfaf7;
  --surface:   #ffffff;
  --surface-2: #f5f3ef;
  --raised:    #edeae4;

  --line:      #e5e2db;
  --line-2:    #cfcbc2;

  /* Nonogram board — crisp pen-on-paper in either theme. */
  /* Nonogram in daylight: unbleached linen, the same madder thread. */
  --no-paper:  #f7f1e4;
  --no-grid:   #ddd0b8;
  --no-block:  #6b5844;
  --no-ink:    #b23a2f;
  --no-head-bg: #ece0c8;
  /* Skyscrapers — the city grid, knocked back for newsprint. */
  --sky-paper: #ffffff;
  --sky-line:  #e2ded4;
  --sky-frame: #cfcbc2;
  --sky-given: var(--text);
  --sky-entry: var(--accent);
  /* KenKen — knocked back for the light board. */
  --kk-math: #1f6fd6;
  --kk-bad:  #d63b3b;
  /* Lights Out — a pale dead panel; lit rides the accent. */
  --lo-off:  #d3d6db;
  --lo-lit:  var(--accent);

  /* Tower on paper: the same snooker set, darkened to hold against the light
     baize — and the cue-white becomes the black ball. */
  --to-c0: #2f2b28;
  --to-c1: #c99a10;
  --to-c2: #cf6a8a;
  --to-c3: #2f7d46;
  --to-c4: #24509e;
  --to-c5: #8f5525;

  /* Snap on white: the same transit line, darkened to hold against the field. */
  --sn-path:    #d4321a;
  --sn-spine:   #ff9c88;
  --sn-node:    #1d222a;
  --sn-paper:   #ffffff;
  --sn-grid:    #c2cad4;
  --sn-frame:   #2f3640;

  /* LITS in daylight — grey cells on paper, the same four shape hues darkened. */
  --lits-paper: #d6d2cb;
  --lits-grid:  #c0bcb2;
  --lits-wall:  #2a2723;
  --lits-ink:   #5a5f66;
  --lits-I: #2f7fd6;
  --lits-L: #e2732f;
  --lits-T: #3fa06a;
  --lits-S: #9a5fc9;

  /* Shikaku on white — the Flood tints lightened to hold the numerals. */
  --sk-paper: #e8e4d8;
  --sk-grout: #ece5d7;    /* cream board behind the white tiles */
  --sk-cell:  #ffffff;    /* white rounded tile face */
  --sk-grid:  rgba(0,0,0,.12);
  --sk-wall:  #2a2723;
  --sk-num:   #2b2620;
  --sk-t0: #e8a99b;  --sk-t1: #ecce8f;  --sk-t2: #a6cfc7;  --sk-t3: #a8c0e0;
  --sk-t4: #dcd7c8;  --sk-t5: #c8b6d8;  --sk-t6: #e6afc1;

  /* Sets on white */
  --sx-paper:   #ffffff;
  --sx-paper-2: #f4f1ea;
  --sx-ink:     #241f1a;
  --sx-line:    #e3ddd0;
  --sx-sel:     #c08a2c;
  --sx-slot:    rgba(192, 138, 44, 0.45);
  --sx-good:    #2f9a63;

  --text:      #1a1b1d;
  --dim:       #5f636a;
  --mute:      #8b9099;

  --accent:      #b8730a;
  --accent-hi:   #8a5607;
  --accent-dim:  rgba(184, 115, 10, 0.10);
  --accent-line: rgba(184, 115, 10, 0.45);
  --on-accent:   #fffdf8;

  --red:   #b03a26;
  --green: #3f7a2b;
  --cyan:  #0e7490;

  --danger-line:  rgba(176, 58, 38, 0.5);
  --danger-text:  #8f2f1f;
  --success-line: rgba(63, 122, 43, 0.5);
  --success-text: #2f5a1f;
  --over:         rgba(176, 58, 38, 0.45);
  --over-text:    #8f2f1f;

  /* Progress rings — the three daily difficulties, easy → hard. */
  --ring-easy:   var(--cyan);
  --ring-medium: var(--green);
  --ring-hard:   var(--red);
  --ring-track:  0.32;

  --veil:  rgba(38, 36, 32, 0.42);
  --focus: var(--accent);
  /* … and a darkening on paper, where white would be invisible */
  --sweep: rgba(0, 0, 0, 0.16);

  /* Queens on newsprint: the same riso inks, knocked back, on warm paper. */
  --q-ink:      #241f1a;
  --q-ink-soft: rgba(36, 31, 26, 0.5);
  --q-edge:     #2a241d;
  --q-grid:     rgba(60, 40, 20, 0.16);
  --q-cross:    #e02b2b;
  --q-r0:       #ffa8c4;
  --q-r1:       #ffc79a;
  --q-r2:       #f5e9a0;
  --q-r3:       #a8dcb4;
  --q-r4:       #98d2d6;
  --q-r5:       #a4c4ea;
  --q-r6:       #b9aee0;
  --q-r7:       #dcaad8;
  --q-r8:       #f2a8ad;

  /* Pipes on paper: the same copper, oxidised down so it sits on light stock. */
  --pi-paper:   #f4ece1;
  --pi-ink:     #8a5a2b;
  --pi-frame:   rgba(138, 90, 43, 0.5);
  --pi-water:   #4fa89c;
  --pi-leak:    #c0563a;
  --pi-lock:    rgba(138, 90, 43, 0.13);

  /* Bonds on blueprint stock: navy ink on pale blue. Not "fixed in both
     themes" — that claim sat here for a long time above six values that
     already differed from the dark block. */
  --bo-paper:  #dde8f4;
  --bo-ink:    #1c3e6a;
  --bo-frame:  rgba(28, 62, 106, 0.5);
  --bo-atom:   #f3f7fc;
  --bo-sat:    #2f7a52;
  --bo-over:   #c2553a;

  /* Mambo in daylight: the same goban, lit. The stones stay slate and shell —
     the wood moves, they do not. These are NOT the dark block's values: the old
     pair was byte-identical across both themes, so the two kinds (the entire
     content of the board) never followed the theme and only the paper behind
     them ever changed. */
  --ma-paper:  #dcb578;
  --ma-ink:    #2b2620;
  --ma-frame:  rgba(60, 40, 20, 0.65);
  --ma-grid:   rgba(60, 40, 20, 0.55);
  --ma-given:  rgba(60, 40, 20, 0.18);
  --ma-hover:  rgba(43, 38, 32, 0.06);
  --ma-mark:   #6b5a42;
  --ma-bad:    #c02a1a;
  --ma-edge:   #33240f;
  --ma-cell-a: #2b2620;   /* slate */
  --ma-cell-b: #fbf7ee;   /* shell */
  --ma-fig:    #2b2620;

  /* Mosaic on paper: the same counters, each pulled down a step so they hold
     the same L* ladder against light stock instead of dark. Unlike the vivid
     set they replaced, these are NOT identical to the dark block — the board
     finally belongs to the theme. */
  --mo-c0: #8f4638;   /* clay   */
  --mo-c1: #b58f42;   /* straw  */
  --mo-c2: #f0ede3;   /* bone   */
  --mo-c3: #4d847e;   /* sage   */
  --mo-c4: #4a6d9e;   /* delft  */
  --mo-c5: #2e262f;   /* ink    */
  --mo-grout: #d5d1c6;

  /* Game marque-icon tiles — the paper chip in the light theme. */
  --gi-face:  #f4efe3;
  --gi-inset: #ece4d3;
  --gi-ink:   #39332a;
  --gi-grid:  #c9bda3;
  /* on paper the edge has to darken, not lighten */
  --gi-edge:  rgba(0, 0, 0, 0.10);

  /* Arena — the same eight identities, deepened just enough to hold on paper.
     A player who picked "the green one" must still see the green one. */
  --av-1: #c2453d;   --av-2: #c0722c;   --av-3: #ab8b1c;   --av-4: #4c8f3d;
  --av-5: #2b8f84;   --av-6: #3570b8;   --av-7: #6c56b5;   --av-8: #b34d88;
  --av-ink:  #fbfaf7;
  --av-edge: rgba(0, 0, 0, 0.12);

  --vs-mine:   var(--accent);
  --vs-theirs: var(--cyan);
  --vs-win:    var(--green);
  --vs-lose:   var(--red);
  --vs-live:   rgba(176, 118, 0, 0.10);
  --vs-clock-track: rgba(0, 0, 0, 0.16);

  /* Frames, deepened just enough to read on paper. */
  --frame-bronze: #a9682f;
  --frame-silver: #8a939c;
  --frame-gold:   #d29a12;
  --frame-blue:   #2b8f9e;
  --frame-red:    #d1502a;
  --frame-purple: #7c56c9;
}