/* ==========================================================================
   Kartuli — visual styles (teacher-selectable) + font choices

   Load LAST, after tokens.css / base.css / app.css / game.css:

     <link rel="stylesheet" href="/static/css/tokens.css">
     <link rel="stylesheet" href="/static/css/base.css">
     <link rel="stylesheet" href="/static/css/app.css">
     <link rel="stylesheet" href="/static/css/game.css">   <!-- game pages -->
     <link rel="stylesheet" href="/static/css/styles.css">

   Selected by two attributes on <html>, written by static/js/style.js:

     <html data-style="classic|primary|chalkboard|sunset|forest|night"
           data-font="default|primary|mono">

   HOW THIS WORKS — read before adding anything here.
   A style is a PALETTE, not a set of component rules. Each style re-points the
   custom properties tokens.css already defines, so one swap restyles the top
   bar, cards, buttons, chips, the game stage and the letter grids at once.
   Component rules appear below only where a style needs a different SHAPE
   (primary's bigger targets and heavier borders, the dusk gradient behind
   sunset, chalkboard's flat matte finish) or where app.css/game.css hard-code
   a literal colour that a palette cannot reach (see "bridge tokens").

   CONTRACT COMPLIANCE
   * Nothing here sets `letter-spacing` or `text-transform` on any selector,
     and nothing here redefines `--font-ka`. `.ka` keeps Noto Sans Georgian
     with `letter-spacing: normal !important` under every style and font
     (contract rules 1 & 2).
   * `--tap` is never lowered; the `primary` style raises it to 52px.
   * No @import, no CDN, no build step.

   SPECIFICITY — why the selectors look the way they do.
   tokens.css sets its dark palette on `:root[data-theme="dark"]`, which is
   (0,2,0). A plain `[data-style="x"]` is (0,1,0) and would LOSE to it. So:
     light blocks   :root[data-style="x"]                        (0,2,0)
     dark  blocks   :root[data-style="x"]:not([data-theme=light]) (0,3,0)
                    :root[data-style="x"][data-theme="dark"]      (0,3,0)
   and this file loads after tokens.css, so equal specificity resolves our way.
   CONSEQUENCE: every colour token a style re-points in its light block MUST
   also be re-pointed in BOTH of its dark blocks, or the light value leaks into
   dark mode. `contrast.py` in the test harness asserts this.

   THEME BEHAVIOUR — a judgement call worth knowing about.
   `chalkboard`, `forest` and `night` are dark-ground styles by definition: a
   chalkboard that turns white is not a chalkboard. They stay dark grounds in
   both modes; the theme changes the DEPTH (light mode = the softer, less
   glaring board; dark mode = the deeper one) and they declare
   `color-scheme: dark` so native controls and scrollbars follow. `classic`,
   `primary` and `sunset` are light-ground styles that invert normally.

   CONTRAST
   Every foreground/background pair that carries text was computed, not
   eyeballed: all five new styles pass WCAG AA 4.5:1 on body text, chips,
   links, and button labels, in light and dark. `classic` is left exactly as
   tokens.css defines it, including its pre-existing sub-4.5 pairs
   (`--ink-faint`, and dark-mode `--wine` used as a link colour).

   Sections
     1  Bridge tokens (reach the literals app.css/game.css hard-code)
     2  classic
     3  primary
     4  chalkboard
     5  sunset
     6  forest
     7  night
     8  Dark mode — all styles
     9  Per-style shape & finish
     10 Fonts
     11 The picker (.style-* — markup built by static/js/style.js)
   ========================================================================== */


/* ==========================================================================
   1. Bridge tokens

   app.css and game.css paint eight things with a LITERAL colour rather than a
   token: `#fff` wherever something sits on a filled wine / apricot / olive /
   berry surface, and `#3A2A06` on a filled gold one. A palette cannot reach a
   literal, and white is invisible on the pale chalk, wood and moonlight
   accents the styles below use.

   So: name them, in exactly two tokens. Every style's accents are uniformly
   deep (light grounds) or uniformly pale (dark grounds), so one "text on a
   filled brand colour" value serves all of wine, apricot, olive and berry —
   verified for each of those four fills, in both themes, by the harness.

   The :root defaults are byte-identical to what app.css and game.css already
   paint, which is why adding these rules changes nothing for `classic`. Note
   that `--on-accent` is NOT `--ink-invert`: classic's ink-invert is the warm
   off-white #FFF9F2, and a tick drawn in it would not be the same pixels the
   checkbox draws today.
   ========================================================================== */

:root {
  --on-accent: #FFFFFF;   /* on a filled wine / apricot / olive / berry surface */
  --on-gold:   #3A2A06;   /* on a filled gold surface                           */
}

/* Buttons whose fill is a brand colour. */
.btn-accent,
.btn-accent:hover,
.btn-danger,
.btn-danger:hover,
.g-btn--accent,
.g-btn--accent:hover       { color: var(--on-accent); }

/* `.btn-danger.btn-ghost` is text on a plain surface, not on a fill: app.css
   colours it `--berry` and must keep doing so. Restated here because the rule
   above would otherwise be the last word on `.btn-danger:hover`. */
.btn-danger.btn-ghost,
.btn-danger.btn-ghost:hover { color: var(--berry); }

/* The keycap inside a graded answer (olive / berry fill). */
.is-correct .g-choice__key,
.is-wrong .g-choice__key   { color: var(--on-accent); }

/* The checkbox tick (a two-gradient chevron on the wine fill) and the switch
   knob, which has to stay visible on both the off track and the olive on
   track. */
/* The checkbox tick lives in app.css and reads --on-accent from the style. */
.switch input::after { background: var(--on-accent); }

/* Filled gold. */
.badge--gold,
.g-streak.is-hot           { color: var(--on-gold); }


/* ==========================================================================
   2. classic — the warm paper/wine look from tokens.css.

   Deliberately empty. The default style is the untouched baseline: if
   `[data-style="classic"]` re-declared the tokens it would be one typo away
   from drifting from tokens.css. `classic` is "no overrides", and the harness
   asserts its computed --bg/--surface/--ink equal a document with no
   data-style attribute at all.
   ========================================================================== */


/* ==========================================================================
   3. primary — early readers.

   Larger type, rounded everything, generous spacing, firmer edges, brighter
   accents that are still warm rather than plastic. The palette is pushed to
   high contrast — ink #14100C on the #FFF4E2 page ground measures 17.4:1 —
   because this is the style a six-year-old reads at arm's length on a shared
   tablet.
   ========================================================================== */

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

  /* Not pure white: `classic` already owns #FFFFFF cards on a #FAF6F0 page,
     and two styles that share a surface stop reading as two styles. A warm
     near-white card on a deeper amber page also separates the card from the
     page more strongly, which is the point here. */
  --bg:           #FFF4E2;
  --surface:      #FFFDF6;
  --surface-2:    #FFECD2;
  --surface-3:    #FFDFB8;
  --line:         #E2CEAB;
  --line-strong:  #8A7454;
  --ink:          #14100C;
  --ink-soft:     #4A423A;
  --ink-faint:    #645B51;
  --ink-invert:   #FFFFFF;

  --wine:       #A52332;
  --wine-deep:  #7E1826;
  --apricot:    #C1571A;
  --olive:      #2C7A36;
  --berry:      #B32222;
  --gold:       #C98A12;
  --indigo:     #3A4A96;

  --wine-tint:    #FFE4E4;
  --apricot-tint: #FFE7D2;
  --olive-tint:   #DFF3DF;
  --berry-tint:   #FFE3E3;
  --gold-tint:    #FFF0CE;
  --indigo-tint:  #E3E7FA;

  --wine-ink:     #7E1826;
  --apricot-ink:  #8A3A0C;
  --olive-ink:    #1F5A28;
  --berry-ink:    #7E1A1A;
  --gold-ink:     #6B4A08;
  --indigo-ink:   #2C3878;

  --on-accent: #FFFFFF;
  --on-gold:   #3A2A06;

  --focus-ring-color: #A52332;

  /* --- Shape: this is the half of "primary" a palette cannot express. ---
     These live outside the dark blocks on purpose — size and radius do not
     change with the theme, so they are declared once. */

  /* Type: one step up across the board, and a looser measure. */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.625rem, 1.3rem + 1.5vw, 2.0625rem);
  --fs-3xl:  clamp(2rem, 1.5rem + 2.5vw, 2.875rem);
  --lh-snug:   1.4;
  --lh-normal: 1.65;
  /* Rounded faces are drawn for no tracking. Never negative. */
  --track-tight: 0em;

  /* Rounder. */
  --radius-xs:  10px;
  --radius-s:   14px;
  --radius-m:   20px;
  --radius-l:   28px;
  --radius-xl:  38px;

  /* Roomier. */
  --sp-3:  0.875rem;
  --sp-4:  1.125rem;
  --sp-5:  1.5rem;
  --sp-6:  1.75rem;
  --sp-8:  2.25rem;
  --sp-10: 2.75rem;

  /* Bigger targets than the 44px floor. */
  --tap: 52px;
  --topbar-h: 64px;
}


/* ==========================================================================
   4. chalkboard — dark green board, chalky off-white text, soft chalk accents.

   Matte: the board has no gloss, so shadows go flat and the white inset
   highlight is removed (see §9).
   ========================================================================== */

:root[data-style="chalkboard"] {
  color-scheme: dark;

  --bg:           #2B4A3E;
  --surface:      #325448;
  --surface-2:    #365B4E;
  --surface-3:    #3D6356;
  --line:         #4A7565;
  --line-strong:  #8FB3A4;
  --ink:          #F4F2E7;
  --ink-soft:     #CFD6C9;
  --ink-faint:    #C2CCC2;
  --ink-invert:   #16281F;

  /* The brief asks for soft WHITE accents, so `--wine` (the primary action,
     the link colour and the logo seal) is warm chalk cream rather than a hue.
     The semantic slots below keep a hue, because olive/berry/gold have to stay
     tellable apart when a game grades an answer. */
  --wine:       #F2E7D2;
  --wine-deep:  #E4D6BC;
  --apricot:    #F3C795;
  --olive:      #AEDDAE;
  --berry:      #F2A8A8;
  --gold:       #F0DA9A;
  --indigo:     #B4CDEE;

  --wine-tint:    #43402F;
  --apricot-tint: #4A4030;
  --olive-tint:   #35543B;
  --berry-tint:   #4A3838;
  --gold-tint:    #4A452F;
  --indigo-tint:  #39485A;

  --wine-ink:     #F2E7D2;
  --apricot-ink:  #F8DCBB;
  --olive-ink:    #C8E8C8;
  --berry-ink:    #F7C6C6;
  --gold-ink:     #F6E8BE;
  --indigo-ink:   #CFDEF4;

  /* Chalk accents are pale, so anything filled with one needs dark text. */
  --on-accent: #16281F;
  --on-gold:   #16281F;

  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 3px 10px rgba(0,0,0,.32);
  --shadow-3: 0 10px 26px rgba(0,0,0,.40);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  --focus-ring-color: #F2E7D2;
}


/* ==========================================================================
   5. sunset — warm dusk. Amber paper in light mode, a plum sky after dark.
   ========================================================================== */

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

  --bg:           #FFEADB;
  --surface:      #FFF9F4;
  --surface-2:    #FFE0C8;
  --surface-3:    #FFD2B4;
  --line:         #F2C9AE;
  --line-strong:  #B87A52;
  --ink:          #33150F;
  --ink-soft:     #5E3227;
  --ink-faint:    #7A4636;
  --ink-invert:   #FFF6F0;

  --wine:       #A32846;
  --wine-deep:  #7F1B36;
  --apricot:    #B9501A;
  --olive:      #2F6E42;
  --berry:      #B22432;
  --gold:       #E09A2E;
  --indigo:     #4B4494;

  --wine-tint:    #FFDEE4;
  --apricot-tint: #FFE2CE;
  --olive-tint:   #DCEFE0;
  --berry-tint:   #FFDEDE;
  --gold-tint:    #FBEBCB;
  --indigo-tint:  #E4E2F8;

  --wine-ink:     #7F1B36;
  --apricot-ink:  #89380E;
  --olive-ink:    #215230;
  --berry-ink:    #7E1A24;
  --gold-ink:     #6A4708;
  --indigo-ink:   #383172;

  --on-accent: #FFF6F0;
  --on-gold:   #3A2A06;

  --focus-ring-color: #A32846;
}


/* ==========================================================================
   6. forest — deep moss ground, cream text, warm wood accents.

   Reads as the warm twin of chalkboard: olive rather than slate, terracotta
   and honey rather than chalk pastels, and it keeps its shadows.
   ========================================================================== */

:root[data-style="forest"] {
  color-scheme: dark;

  --bg:           #2E3C26;
  --surface:      #36462D;
  --surface-2:    #3F5135;
  --surface-3:    #485C3C;
  --line:         #556B48;
  --line-strong:  #93A886;
  --ink:          #F6F0DE;
  --ink-soft:     #D6CFB4;
  --ink-faint:    #C4BEA4;
  --ink-invert:   #222C1A;

  --wine:       #F0A97E;
  --wine-deep:  #E2946A;
  --apricot:    #EEBC80;
  --olive:      #B2DC92;
  --berry:      #F2A692;
  --gold:       #EFD692;
  --indigo:     #AFC4E4;

  --wine-tint:    #4A3E2E;
  --apricot-tint: #3E3626;
  --olive-tint:   #3E5436;
  --berry-tint:   #4A3A32;
  --gold-tint:    #4A4530;
  --indigo-tint:  #3A4552;

  --wine-ink:     #F6C8AC;
  --apricot-ink:  #F5D6AE;
  --olive-ink:    #CDE8B8;
  --berry-ink:    #F7C8BA;
  --gold-ink:     #F6E6BE;
  --indigo-ink:   #CFDCEE;

  --on-accent: #222C1A;
  --on-gold:   #222C1A;

  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.22);
  --shadow-2: 0 4px 16px rgba(0,0,0,.34);
  --shadow-3: 0 12px 32px rgba(0,0,0,.44), 0 2px 6px rgba(0,0,0,.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07);

  --focus-ring-color: #EFD692;
}


/* ==========================================================================
   7. night — near-black, cool accents, low glare.

   Distinct from plain dark mode two ways: the ground is neutral blue-black
   rather than tokens.css's warm brown-black, and the ink is a soft
   #D8DEE8 rather than a bright cream — a deliberate ceiling on luminance for
   reading in the dark. Contrast is still 12.7:1 on the page ground.
   ========================================================================== */

:root[data-style="night"] {
  color-scheme: dark;

  --bg:           #11141A;
  --surface:      #171B22;
  --surface-2:    #1E232C;
  --surface-3:    #262C37;
  --line:         #2F3642;
  --line-strong:  #6C7686;
  --ink:          #D8DEE8;
  --ink-soft:     #A6AEBC;
  --ink-faint:    #8A93A2;
  --ink-invert:   #0B0E13;

  --wine:       #8FA8DC;
  --wine-deep:  #7C95CA;
  --apricot:    #72C2CA;
  --olive:      #7ECA9E;
  --berry:      #DE9098;
  --gold:       #CBB682;
  --indigo:     #9FA9E4;

  --wine-tint:    #232A38;
  --apricot-tint: #1C2E32;
  --olive-tint:   #1C2E26;
  --berry-tint:   #302126;
  --gold-tint:    #2C2820;
  --indigo-tint:  #25283C;

  --wine-ink:     #B8CAF0;
  --apricot-ink:  #9CD8DE;
  --olive-ink:    #A6DCBE;
  --berry-ink:    #EEB4BA;
  --gold-ink:     #E0CFA4;
  --indigo-ink:   #C0C6F2;

  --on-accent: #0B0E13;
  --on-gold:   #0B0E13;

  /* Low glare: no bright inset highlight, and shadows read as depth not gloss. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.55);
  --shadow-2: 0 4px 16px rgba(0,0,0,.60);
  --shadow-3: 0 12px 32px rgba(0,0,0,.70), 0 2px 6px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --focus-ring-color: #8FA8DC;
}


/* ==========================================================================
   8. DARK MODE — every style, twice.

   First the system preference (guarded so `data-theme="light"` pins light),
   then the explicit choice, which always wins. Same values in both; this is
   the pattern tokens.css uses and the reason it is duplicated is that a
   @media block cannot be merged with an attribute selector.

   Every colour token set in a style's light block above is repeated here.
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  /* --- primary (dark) ------------------------------------------------- */
  :root[data-style="primary"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #100E0A;  --surface: #1A1610;  --surface-2: #272119;  --surface-3: #342C21;
    --line: #3E3527;  --line-strong: #9C8C6E;
    --ink: #FFF9EC;  --ink-soft: #DCD2C0;  --ink-faint: #B6AC98;  --ink-invert: #1A1206;
    --wine: #FF8B93;  --wine-deep: #F06A76;  --apricot: #FFA45E;  --olive: #8ADF96;
    --berry: #FF9A9A;  --gold: #F5CE6E;  --indigo: #AEB9FF;
    --wine-tint: #3E1E22;  --apricot-tint: #3E2716;  --olive-tint: #1E3423;
    --berry-tint: #3E2020;  --gold-tint: #3A2E14;  --indigo-tint: #242844;
    --wine-ink: #FFC2C6;  --apricot-ink: #FFD0A8;  --olive-ink: #B6E8BC;
    --berry-ink: #FFC4C4;  --gold-ink: #F6DEA4;  --indigo-ink: #CBD2FF;
    --on-accent: #1A1206;  --on-gold: #1A1206;
    --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
    --shadow-2: 0 4px 16px rgba(0,0,0,.45);
    --shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07);
    --focus-ring-color: #FFA45E;
  }

  /* --- chalkboard (dark) ---------------------------------------------- */
  :root[data-style="chalkboard"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16281F;  --surface: #1C3227;  --surface-2: #243D31;  --surface-3: #2C483B;
    --line: #365546;  --line-strong: #77998A;
    --ink: #EFEDE1;  --ink-soft: #C4CCBF;  --ink-faint: #A0AC9F;  --ink-invert: #102019;
    --wine: #EFE3CC;  --wine-deep: #E0D2B6;  --apricot: #F0C08C;  --olive: #A6D9A6;
    --berry: #F0A0A0;  --gold: #EDD492;  --indigo: #ACC6EA;
    --wine-tint: #35322A;  --apricot-tint: #372E22;  --olive-tint: #223A2A;
    --berry-tint: #37292A;  --gold-tint: #373222;  --indigo-tint: #283443;
    --wine-ink: #EFE3CC;  --apricot-ink: #F6D8B4;  --olive-ink: #C4E6C4;
    --berry-ink: #F5C2C2;  --gold-ink: #F4E4B8;  --indigo-ink: #CCDCF2;
    --on-accent: #102019;  --on-gold: #102019;
    --shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --shadow-2: 0 3px 10px rgba(0,0,0,.46);
    --shadow-3: 0 10px 26px rgba(0,0,0,.55);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);
    --focus-ring-color: #F2E7D2;
  }

  /* --- sunset (dark) --------------------------------------------------- */
  :root[data-style="sunset"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1B1018;  --surface: #261722;  --surface-2: #33202C;  --surface-3: #402A37;
    --line: #4B3342;  --line-strong: #8A6376;
    --ink: #FFEFE6;  --ink-soft: #DCC0C6;  --ink-faint: #B69AA4;  --ink-invert: #2A1018;
    --wine: #FF8E9E;  --wine-deep: #F5748A;  --apricot: #FFA463;  --olive: #7FD79A;
    --berry: #FF9A9A;  --gold: #F7CE76;  --indigo: #B2A6F2;
    --wine-tint: #3E1F2A;  --apricot-tint: #3E2718;  --olive-tint: #1F3628;
    --berry-tint: #3E2024;  --gold-tint: #3A2E18;  --indigo-tint: #272248;
    --wine-ink: #FFC4CC;  --apricot-ink: #FFD2AC;  --olive-ink: #B0E6C0;
    --berry-ink: #FFC4C4;  --gold-ink: #F8DEA8;  --indigo-ink: #D0C8FA;
    --on-accent: #2A1018;  --on-gold: #2A1018;
    --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.32);
    --shadow-2: 0 4px 16px rgba(0,0,0,.48);
    --shadow-3: 0 12px 32px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.38);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07);
    --focus-ring-color: #FFA463;
  }

  /* --- forest (dark) --------------------------------------------------- */
  :root[data-style="forest"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #19230F;  --surface: #202C16;  --surface-2: #28371C;  --surface-3: #314224;
    --line: #3C4E2C;  --line-strong: #7E9270;
    --ink: #F2ECD8;  --ink-soft: #CCC6AC;  --ink-faint: #A8A28A;  --ink-invert: #161E0C;
    --wine: #EEA274;  --wine-deep: #E08C60;  --apricot: #ECB578;  --olive: #A8D488;
    --berry: #F09E8A;  --gold: #EBD08A;  --indigo: #A8BEDE;
    --wine-tint: #38301E;  --apricot-tint: #383020;  --olive-tint: #26361C;
    --berry-tint: #382C22;  --gold-tint: #383220;  --indigo-tint: #2A3340;
    --wine-ink: #F4C4A8;  --apricot-ink: #F3D2AA;  --olive-ink: #C8E4B2;
    --berry-ink: #F5C4B4;  --gold-ink: #F2E2B8;  --indigo-ink: #C8D6EA;
    --on-accent: #161E0C;  --on-gold: #161E0C;
    --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.30);
    --shadow-2: 0 4px 16px rgba(0,0,0,.48);
    --shadow-3: 0 12px 32px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.38);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);
    --focus-ring-color: #EBD08A;
  }

  /* --- night (dark) ---------------------------------------------------- */
  :root[data-style="night"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #090B0F;  --surface: #0E1116;  --surface-2: #141922;  --surface-3: #1B212B;
    --line: #252C38;  --line-strong: #626C7C;
    --ink: #D2D8E2;  --ink-soft: #A0A8B6;  --ink-faint: #858E9C;  --ink-invert: #07090C;
    --wine: #8AA4D8;  --wine-deep: #7890C6;  --apricot: #6EBEC6;  --olive: #7AC69A;
    --berry: #DA8C94;  --gold: #C7B27E;  --indigo: #9BA5E0;
    --wine-tint: #1C2432;  --apricot-tint: #16282C;  --olive-tint: #162820;
    --berry-tint: #2A1C20;  --gold-tint: #26221A;  --indigo-tint: #1E2136;
    --wine-ink: #B4C6EC;  --apricot-ink: #98D4DA;  --olive-ink: #A2D8BA;
    --berry-ink: #EAB0B6;  --gold-ink: #DCCBA0;  --indigo-ink: #BCC2EE;
    --on-accent: #07090C;  --on-gold: #07090C;
    --shadow-1: 0 1px 2px rgba(0,0,0,.65);
    --shadow-2: 0 4px 16px rgba(0,0,0,.70);
    --shadow-3: 0 12px 32px rgba(0,0,0,.80), 0 2px 6px rgba(0,0,0,.55);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);
    --focus-ring-color: #8AA4D8;
  }
}

/* --- The explicit choice. Identical values; always wins. ---------------- */

:root[data-style="primary"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #100E0A;  --surface: #1A1610;  --surface-2: #272119;  --surface-3: #342C21;
  --line: #3E3527;  --line-strong: #9C8C6E;
  --ink: #FFF9EC;  --ink-soft: #DCD2C0;  --ink-faint: #B6AC98;  --ink-invert: #1A1206;
  --wine: #FF8B93;  --wine-deep: #F06A76;  --apricot: #FFA45E;  --olive: #8ADF96;
  --berry: #FF9A9A;  --gold: #F5CE6E;  --indigo: #AEB9FF;
  --wine-tint: #3E1E22;  --apricot-tint: #3E2716;  --olive-tint: #1E3423;
  --berry-tint: #3E2020;  --gold-tint: #3A2E14;  --indigo-tint: #242844;
  --wine-ink: #FFC2C6;  --apricot-ink: #FFD0A8;  --olive-ink: #B6E8BC;
  --berry-ink: #FFC4C4;  --gold-ink: #F6DEA4;  --indigo-ink: #CBD2FF;
  --on-accent: #1A1206;  --on-gold: #1A1206;
  --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
  --shadow-2: 0 4px 16px rgba(0,0,0,.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07);
  --focus-ring-color: #FFA45E;
}

:root[data-style="chalkboard"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #16281F;  --surface: #1C3227;  --surface-2: #243D31;  --surface-3: #2C483B;
  --line: #365546;  --line-strong: #77998A;
  --ink: #EFEDE1;  --ink-soft: #C4CCBF;  --ink-faint: #A0AC9F;  --ink-invert: #102019;
  --wine: #EFE3CC;  --wine-deep: #E0D2B6;  --apricot: #F0C08C;  --olive: #A6D9A6;
  --berry: #F0A0A0;  --gold: #EDD492;  --indigo: #ACC6EA;
  --wine-tint: #35322A;  --apricot-tint: #372E22;  --olive-tint: #223A2A;
  --berry-tint: #37292A;  --gold-tint: #373222;  --indigo-tint: #283443;
  --wine-ink: #EFE3CC;  --apricot-ink: #F6D8B4;  --olive-ink: #C4E6C4;
  --berry-ink: #F5C2C2;  --gold-ink: #F4E4B8;  --indigo-ink: #CCDCF2;
  --on-accent: #102019;  --on-gold: #102019;
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 3px 10px rgba(0,0,0,.46);
  --shadow-3: 0 10px 26px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);
  --focus-ring-color: #F2E7D2;
}

:root[data-style="sunset"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1018;  --surface: #261722;  --surface-2: #33202C;  --surface-3: #402A37;
  --line: #4B3342;  --line-strong: #8A6376;
  --ink: #FFEFE6;  --ink-soft: #DCC0C6;  --ink-faint: #B69AA4;  --ink-invert: #2A1018;
  --wine: #FF8E9E;  --wine-deep: #F5748A;  --apricot: #FFA463;  --olive: #7FD79A;
  --berry: #FF9A9A;  --gold: #F7CE76;  --indigo: #B2A6F2;
  --wine-tint: #3E1F2A;  --apricot-tint: #3E2718;  --olive-tint: #1F3628;
  --berry-tint: #3E2024;  --gold-tint: #3A2E18;  --indigo-tint: #272248;
  --wine-ink: #FFC4CC;  --apricot-ink: #FFD2AC;  --olive-ink: #B0E6C0;
  --berry-ink: #FFC4C4;  --gold-ink: #F8DEA8;  --indigo-ink: #D0C8FA;
  --on-accent: #2A1018;  --on-gold: #2A1018;
  --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.32);
  --shadow-2: 0 4px 16px rgba(0,0,0,.48);
  --shadow-3: 0 12px 32px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.38);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07);
  --focus-ring-color: #FFA463;
}

:root[data-style="forest"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #19230F;  --surface: #202C16;  --surface-2: #28371C;  --surface-3: #314224;
  --line: #3C4E2C;  --line-strong: #7E9270;
  --ink: #F2ECD8;  --ink-soft: #CCC6AC;  --ink-faint: #A8A28A;  --ink-invert: #161E0C;
  --wine: #EEA274;  --wine-deep: #E08C60;  --apricot: #ECB578;  --olive: #A8D488;
  --berry: #F09E8A;  --gold: #EBD08A;  --indigo: #A8BEDE;
  --wine-tint: #38301E;  --apricot-tint: #383020;  --olive-tint: #26361C;
  --berry-tint: #382C22;  --gold-tint: #383220;  --indigo-tint: #2A3340;
  --wine-ink: #F4C4A8;  --apricot-ink: #F3D2AA;  --olive-ink: #C8E4B2;
  --berry-ink: #F5C4B4;  --gold-ink: #F2E2B8;  --indigo-ink: #C8D6EA;
  --on-accent: #161E0C;  --on-gold: #161E0C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.30);
  --shadow-2: 0 4px 16px rgba(0,0,0,.48);
  --shadow-3: 0 12px 32px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.38);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);
  --focus-ring-color: #EBD08A;
}

:root[data-style="night"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #090B0F;  --surface: #0E1116;  --surface-2: #141922;  --surface-3: #1B212B;
  --line: #252C38;  --line-strong: #626C7C;
  --ink: #D2D8E2;  --ink-soft: #A0A8B6;  --ink-faint: #858E9C;  --ink-invert: #07090C;
  --wine: #8AA4D8;  --wine-deep: #7890C6;  --apricot: #6EBEC6;  --olive: #7AC69A;
  --berry: #DA8C94;  --gold: #C7B27E;  --indigo: #9BA5E0;
  --wine-tint: #1C2432;  --apricot-tint: #16282C;  --olive-tint: #162820;
  --berry-tint: #2A1C20;  --gold-tint: #26221A;  --indigo-tint: #1E2136;
  --wine-ink: #B4C6EC;  --apricot-ink: #98D4DA;  --olive-ink: #A2D8BA;
  --berry-ink: #EAB0B6;  --gold-ink: #DCCBA0;  --indigo-ink: #BCC2EE;
  --on-accent: #07090C;  --on-gold: #07090C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.65);
  --shadow-2: 0 4px 16px rgba(0,0,0,.70);
  --shadow-3: 0 12px 32px rgba(0,0,0,.80), 0 2px 6px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);
  --focus-ring-color: #8AA4D8;
}


/* ==========================================================================
   9. Per-style shape & finish

   Everything above is palette. Everything here is a genuine difference in
   shape, weight or surface finish that a token cannot carry. Kept short on
   purpose — if a rule here grows past a few lines it usually means a token
   was the right answer.
   ========================================================================== */

/* --- The page wash -------------------------------------------------------
   base.css paints a fixed apricot glow behind every page. It is a warm-paper
   effect: on a dark board it turns into a brown smear, and sunset wants a real
   dusk instead. classic is untouched. */

:root[data-style="primary"] body {
  background-image:
    radial-gradient(100rem 36rem at 50% -8rem, rgba(255,164,80,.16), transparent 70%);
}

:root[data-style="chalkboard"] body {
  /* Matte board: a faint top-light, nothing warm. */
  background-image:
    radial-gradient(120rem 46rem at 50% -14rem, rgba(255,255,255,.05), transparent 72%);
}

:root[data-style="sunset"] body {
  background-image:
    linear-gradient(180deg, rgba(255,138,74,.50) 0%, rgba(255,172,116,.26) 26%,
                    rgba(255,206,168,.10) 52%, transparent 80%),
    radial-gradient(64rem 28rem at 86% -5rem, rgba(255,104,80,.28), transparent 68%);
}
:root[data-style="sunset"]:not([data-theme="light"]) body { background-image: none; }
@media (prefers-color-scheme: dark) {
  :root[data-style="sunset"]:not([data-theme="light"]) body {
    background-image:
      linear-gradient(180deg, rgba(150,62,124,.52) 0%, rgba(92,40,88,.28) 30%,
                      rgba(52,26,54,.12) 56%, transparent 82%),
      radial-gradient(64rem 28rem at 86% -5rem, rgba(226,92,112,.26), transparent 68%);
  }
}
:root[data-style="sunset"][data-theme="dark"] body {
  background-image:
    linear-gradient(180deg, rgba(150,62,124,.52) 0%, rgba(92,40,88,.28) 30%,
                    rgba(52,26,54,.12) 56%, transparent 82%),
    radial-gradient(64rem 28rem at 86% -5rem, rgba(226,92,112,.26), transparent 68%);
}
/* The pinned-light case must not keep the dark-mode override above. */
:root[data-style="sunset"][data-theme="light"] body {
  background-image:
    linear-gradient(180deg, rgba(255,138,74,.50) 0%, rgba(255,172,116,.26) 26%,
                    rgba(255,206,168,.10) 52%, transparent 80%),
    radial-gradient(64rem 28rem at 86% -5rem, rgba(255,104,80,.28), transparent 68%);
}

:root[data-style="forest"] body {
  background-image:
    radial-gradient(110rem 40rem at 50% -12rem, rgba(239,214,146,.09), transparent 70%);
}

:root[data-style="night"] body {
  /* Low glare: the faintest cool lift, no colour cast worth the name. */
  background-image:
    radial-gradient(120rem 44rem at 50% -16rem, rgba(143,168,220,.055), transparent 74%);
}

/* --- primary: firmer edges -----------------------------------------------
   Only border-WIDTH is touched, never border-colour: .btn-primary and friends
   set their own colour and a `[data-style] .btn` selector would outrank them. */

:root[data-style="primary"] .btn,
:root[data-style="primary"] .card,
:root[data-style="primary"] .input,
:root[data-style="primary"] .textarea,
:root[data-style="primary"] .select,
:root[data-style="primary"] .chip,
:root[data-style="primary"] .g-card,
:root[data-style="primary"] .g-cell,
:root[data-style="primary"] .g-btn { border-width: 2px; }

:root[data-style="primary"] .g-choice,
:root[data-style="primary"] .g-tile { border-width: 3px; }

/* Bigger, calmer answer targets for a small reader. */
:root[data-style="primary"] .g-choice { min-height: 64px; }
:root[data-style="primary"] .g-cell   { min-height: 40px; }
:root[data-style="primary"] .g-btn    { min-height: 58px; }

/* A thicker focus ring, because the whole style is about being easy to see. */
:root[data-style="primary"] :focus-visible { outline-width: 3px; }

/* --- chalkboard: matte ----------------------------------------------------
   Chalk on slate has no gloss. Flatten the two surfaces that read as
   "polished" and let the board show through the cards. */

:root[data-style="chalkboard"] .card,
:root[data-style="chalkboard"] .g-card,
:root[data-style="chalkboard"] .g-choice,
:root[data-style="chalkboard"] .g-cell,
:root[data-style="chalkboard"] .g-tile { box-shadow: none; }

:root[data-style="chalkboard"] .g-card,
:root[data-style="chalkboard"] .card { background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* --- The hot-streak chip on a light-ground style --------------------------
   game.css paints `.g-streak.is-hot` as gold -> apricot with dark text. In
   `primary` and `sunset` (light grounds) `--apricot` has to be DEEP so the
   white `.btn-accent` label clears 4.5:1 — which leaves the dark streak text
   at 3.07 / 2.79 on the apricot end of that gradient. One token cannot be
   both, so the gradient loses its apricot end here and stays in gold, where
   `--on-gold` measures 4.71 / 5.83. Every other style has pale accents and
   keeps game.css's gradient untouched. */

:root[data-style="primary"] .g-streak.is-hot,
:root[data-style="sunset"]  .g-streak.is-hot {
  background: linear-gradient(120deg,
    var(--gold), color-mix(in srgb, var(--gold) 70%, #FFFFFF));
}

/* --- Dark-ground styles in LIGHT mode -------------------------------------
   app.css brightens a hovered chip only under [data-theme="dark"]. These three
   styles are dark grounds whatever the theme says, so they need the same. */

:root[data-style="chalkboard"] .chip--action:hover,
:root[data-style="forest"] .chip--action:hover,
:root[data-style="night"] .chip--action:hover { filter: brightness(1.18); }


/* ==========================================================================
   10. Fonts — <html data-font="default|primary|mono">

   ONLY `--font-ui` moves. `--font-ka` is never touched, so `.ka` keeps
   rendering Georgian in Noto Sans Georgian under every setting (contract
   rule 1's companion: the font must not change under the reader's feet).
   'Noto Sans Georgian' is appended to each stack anyway as a safety net for
   any Georgian string a template forgot to mark `.ka`.

   Neither block sets `letter-spacing` or `text-transform` on anything. The
   rounded and mono faces are drawn on their own metrics, so the default
   negative tracking is zeroed via the token — a token, not a declaration, so
   `.ka`'s `letter-spacing: normal !important` is never in a fight with it.

   No webfont is added: contract rule 4 forbids a CDN and the repo ships only
   Inter + Noto Sans Georgian, so these stacks are system faces that degrade
   to Inter when nothing better is installed.
   ========================================================================== */

:root[data-font="default"] {
  --font-ui: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI',
             'Noto Sans Georgian', sans-serif;
}

:root[data-font="primary"] {
  /* `ui-rounded` is the real SF Pro Rounded on Apple platforms; the named
     faces cover anyone who has them; Trebuchet/Verdana are the wide-aperture,
     large-x-height fallbacks that ship on Windows and most Androids. */
  --font-ui: ui-rounded, 'SF Pro Rounded', 'Varela Round', 'Nunito',
             'Quicksand', 'Trebuchet MS', Verdana, 'Inter var', system-ui,
             'Noto Sans Georgian', sans-serif;
  --track-tight: 0em;
}

:root[data-font="mono"] {
  --font-ui: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
             'Liberation Mono', 'Noto Sans Georgian', monospace;
  --track-tight: 0em;
}


/* ==========================================================================
   11. The picker — markup built by static/js/style.js

   Two native radio groups. Every visible control is a <label> wrapping a
   .sr-only <input type="radio">, so keyboard support (Tab to the group, arrows
   inside it), screen-reader semantics and the checked state all come from the
   browser; the rules below only draw them.

   The swatch previews repeat a handful of literals from the palettes above.
   That duplication is deliberate and kept HERE, next to the source values,
   rather than in style.js: a swatch has to paint colours the document is not
   currently using, so it cannot read them from the cascade. They follow the
   theme, so a teacher previews what their own screen would show.
   ========================================================================== */

.style-picker { display: block; }

/* --- Style swatches ------------------------------------------------------ */

.style-swatches {
  display: grid;
  /* 84px is the width at which all six swatches fit three-across inside a
     .card on a 360px phone, with the longest name ("Chalkboard") still
     un-truncated at --fs-sm. */
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sp-2);
}

.style-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  min-height: var(--tap);
  padding: var(--sp-1);
  border-radius: var(--radius-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.style-swatch__preview {
  position: relative;
  display: block;
  height: 52px;
  border-radius: var(--radius-s);
  background: var(--sw-bg, var(--bg));
  border: 2px solid var(--line);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
/* The card, a line of "text" on it, and the accent mark. */
.style-swatch__card {
  position: absolute;
  inset: 30% 30% 16% 14%;
  border-radius: 5px;
  background: var(--sw-surface, var(--surface));
}
.style-swatch__bar {
  position: absolute;
  left: 22%; right: 42%; top: 46%;
  height: 5px;
  border-radius: 3px;
  background: var(--sw-ink, var(--ink));
  opacity: .8;
}
.style-swatch__dot {
  position: absolute;
  right: 13%; top: 17%;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--sw-accent, var(--wine));
  box-shadow: 0 0 0 3px var(--sw-accent2, var(--apricot));
}

/* The two light-ground styles read almost alike as flat swatches, so sunset's
   preview carries the dusk wash its page actually has, and primary's inner
   card carries the bigger radius its cards actually have. Both are the real
   difference, not decoration. */
.style-swatch__preview[data-style="sunset"] {
  background-image:
    linear-gradient(180deg, rgba(255,138,74,.62), rgba(255,178,124,.22) 55%, transparent 85%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="sunset"] {
    background-image:
      linear-gradient(180deg, rgba(150,62,124,.85), rgba(92,40,88,.40) 55%, transparent 85%);
  }
}
:root[data-theme="dark"] .style-swatch__preview[data-style="sunset"] {
  background-image:
    linear-gradient(180deg, rgba(150,62,124,.85), rgba(92,40,88,.40) 55%, transparent 85%);
}
.style-swatch__preview[data-style="primary"] .style-swatch__card { border-radius: 8px; }

.style-swatch__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checked — a ring plus a weight change, so the state is never colour alone. */
.style-swatch input:checked + .style-swatch__preview {
  border-color: var(--wine);
  box-shadow: 0 0 0 2px var(--wine);
}
.style-swatch input:checked ~ /* The two light-ground styles read almost alike as flat swatches, so sunset's
   preview carries the dusk wash its page actually has, and primary's inner
   card carries the bigger radius its cards actually have. Both are the real
   difference, not decoration. */
.style-swatch__preview[data-style="sunset"] {
  background-image:
    linear-gradient(180deg, rgba(255,138,74,.62), rgba(255,178,124,.22) 55%, transparent 85%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="sunset"] {
    background-image:
      linear-gradient(180deg, rgba(150,62,124,.85), rgba(92,40,88,.40) 55%, transparent 85%);
  }
}
:root[data-theme="dark"] .style-swatch__preview[data-style="sunset"] {
  background-image:
    linear-gradient(180deg, rgba(150,62,124,.85), rgba(92,40,88,.40) 55%, transparent 85%);
}
.style-swatch__preview[data-style="primary"] .style-swatch__card { border-radius: 8px; }

.style-swatch__name {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

.style-swatch input:focus-visible + .style-swatch__preview {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}

@media (hover: hover) {
  .style-swatch:hover .style-swatch__preview { border-color: var(--line-strong); }
}

/* --- Swatch palettes: light --------------------------------------------- */

.style-swatch__preview[data-style="classic"]    { --sw-bg:#FAF6F0; --sw-surface:#FFFFFF; --sw-ink:#1A1614; --sw-accent:#8C2F39; --sw-accent2:#E0713A; }
.style-swatch__preview[data-style="primary"]    { --sw-bg:#FFF4E2; --sw-surface:#FFFDF6; --sw-ink:#14100C; --sw-accent:#A52332; --sw-accent2:#C1571A; }
.style-swatch__preview[data-style="chalkboard"] { --sw-bg:#2B4A3E; --sw-surface:#325448; --sw-ink:#F4F2E7; --sw-accent:#F2E7D2; --sw-accent2:#F3C795; }
.style-swatch__preview[data-style="sunset"]     { --sw-bg:#FFEADB; --sw-surface:#FFF9F4; --sw-ink:#33150F; --sw-accent:#A32846; --sw-accent2:#B9501A; }
.style-swatch__preview[data-style="forest"]     { --sw-bg:#2E3C26; --sw-surface:#36462D; --sw-ink:#F6F0DE; --sw-accent:#F0A97E; --sw-accent2:#EEBC80; }
.style-swatch__preview[data-style="night"]      { --sw-bg:#11141A; --sw-surface:#171B22; --sw-ink:#D8DEE8; --sw-accent:#8FA8DC; --sw-accent2:#72C2CA; }

/* --- Swatch palettes: dark ---------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="classic"]    { --sw-bg:#14120F; --sw-surface:#1E1A15; --sw-ink:#F4EDE3; --sw-accent:#B8454F; --sw-accent2:#EE8A53; }
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="primary"]    { --sw-bg:#100E0A; --sw-surface:#1A1610; --sw-ink:#FFF9EC; --sw-accent:#FF8B93; --sw-accent2:#FFA45E; }
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="chalkboard"] { --sw-bg:#16281F; --sw-surface:#1C3227; --sw-ink:#EFEDE1; --sw-accent:#EFE3CC; --sw-accent2:#F0C08C; }
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="sunset"]     { --sw-bg:#1B1018; --sw-surface:#261722; --sw-ink:#FFEFE6; --sw-accent:#FF8E9E; --sw-accent2:#FFA463; }
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="forest"]     { --sw-bg:#19230F; --sw-surface:#202C16; --sw-ink:#F2ECD8; --sw-accent:#EEA274; --sw-accent2:#ECB578; }
  :root:not([data-theme="light"]) .style-swatch__preview[data-style="night"]      { --sw-bg:#090B0F; --sw-surface:#0E1116; --sw-ink:#D2D8E2; --sw-accent:#8AA4D8; --sw-accent2:#6EBEC6; }
}

:root[data-theme="dark"] .style-swatch__preview[data-style="classic"]    { --sw-bg:#14120F; --sw-surface:#1E1A15; --sw-ink:#F4EDE3; --sw-accent:#B8454F; --sw-accent2:#EE8A53; }
:root[data-theme="dark"] .style-swatch__preview[data-style="primary"]    { --sw-bg:#100E0A; --sw-surface:#1A1610; --sw-ink:#FFF9EC; --sw-accent:#FF8B93; --sw-accent2:#FFA45E; }
:root[data-theme="dark"] .style-swatch__preview[data-style="chalkboard"] { --sw-bg:#16281F; --sw-surface:#1C3227; --sw-ink:#EFEDE1; --sw-accent:#EFE3CC; --sw-accent2:#F0C08C; }
:root[data-theme="dark"] .style-swatch__preview[data-style="sunset"]     { --sw-bg:#1B1018; --sw-surface:#261722; --sw-ink:#FFEFE6; --sw-accent:#FF8E9E; --sw-accent2:#FFA463; }
:root[data-theme="dark"] .style-swatch__preview[data-style="forest"]     { --sw-bg:#19230F; --sw-surface:#202C16; --sw-ink:#F2ECD8; --sw-accent:#EEA274; --sw-accent2:#ECB578; }
:root[data-theme="dark"] .style-swatch__preview[data-style="night"]      { --sw-bg:#090B0F; --sw-surface:#0E1116; --sw-ink:#D2D8E2; --sw-accent:#8AA4D8; --sw-accent2:#6EBEC6; }

/* --- Font chips ---------------------------------------------------------- */

.style-fonts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.style-font {
  display: inline-flex;
  min-height: var(--tap);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* .chip is a 13px pill; as a control it needs the 44px floor and real padding. */
.style-font__chip {
  min-height: var(--tap);
  padding-inline: var(--sp-4);
  font-size: var(--fs-md);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
}

/* Each option is set in the face it selects. Latin labels only — no
   letter-spacing and no text-transform, and --font-ka is never involved, so
   any `.ka` string placed inside would still render in Noto Sans Georgian. */
.style-font__chip[data-font="default"] {
  font-family: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI',
               'Noto Sans Georgian', sans-serif;
}
.style-font__chip[data-font="primary"] {
  font-family: ui-rounded, 'SF Pro Rounded', 'Varela Round', 'Nunito',
               'Quicksand', 'Trebuchet MS', Verdana, 'Inter var', system-ui,
               'Noto Sans Georgian', sans-serif;
}
.style-font__chip[data-font="mono"] {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', 'Noto Sans Georgian', monospace;
}

.style-font input:checked + .style-font__chip {
  background: var(--wine-tint);
  border-color: var(--wine);
  color: var(--wine-ink);
  font-weight: var(--fw-semibold);
}

.style-font input:focus-visible + .style-font__chip {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}