/* Themes.
 *
 * Two layers, deliberately:
 *   1. Variables on [data-theme=…] — picked up by app.css, so the admin portal
 *      follows the business's palette (a dark theme darkens their workspace too).
 *   2. Structural rules scoped to .site-page — hero shape, type scale, how the
 *      service list is rendered. This layer is what stops seven themes from being
 *      one page in seven colours.
 *
 * RTL note: no theme uses uppercase eyebrows, because Hebrew has no uppercase.
 * Where a Latin design would shout in caps, these use letter-spacing, size and
 * colour instead.
 */

/* ------------------------------------------------------ ledger (direction 01)
   לוח שקט / Quiet Ledger. Structure lives in static/site/ledger.css; only the
   tokens are here so the platform (and the admin portal) can drive them. */
[data-theme="ledger"] {
  --bg: #f7f5f0; --surface: #fffdf9; --card: #fffdf9; --ink: #21201c; --muted: #6d6a62;
  --line: #e2ddd2; --accent: #1f5e58; --accent-ink: #ffffff; --accent-soft: #e3ecea;
  --radius: 2px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #efeae0; --hero-ink: #21201c;
}

/* ---------------------------------------------------- counsel (direction 14)
   לשכה / Counsel. Structure in static/site/counsel.css. Ported from
   design-drops/lawyer-templates-2026-08-30/Gili Barzani.dc.html.

   Two golds, and they are not interchangeable. --accent (#826934) is the one
   that carries TEXT — the eyebrow, the proof line, a link — and it is the deeper
   of the two because it has to clear 4.5:1 on the warm paper. --accent-line
   (#c0a265) is the design's own brighter gold and is used ONLY as a rule, a
   number or a "+" glyph, where nothing has to be read. Swapping them makes the
   page prettier and illegible, which is exactly what the pair exists to prevent.

   That sentence was here before the gold was: it shipped at #826934, which is
   4.06:1, and the comment asserting 4.5 is what stopped anyone measuring. Now
   #826934 — 4.56:1 on the paper and as white-on-gold on the primary button.
   Measured 2026-09-03, and test_blocks_hardening.py checks the claim against the
   value on every run, because a number in a comment is not a guard.

   --radius is 0 and that is the direction: the reference design has no rounded
   corner anywhere, and a 2px softening reads as a mistake rather than a detail. */
[data-theme="counsel"] {
  --bg: #fffdfa; --surface: #ffffff; --card: #ffffff; --ink: #221f1a; --muted: #5e574c;
  /* The second ink. The reference runs body copy at #5e574c and its LEAD copy —
     the hero paragraph, the credential line under the portrait — one step darker
     at #3e3931, so the opening reads as speech and the rest as explanation. */
  --ink2: #3e3931;
  --line: #efe9dd; --accent: #826934; --accent-ink: #ffffff; --accent-soft: #f5efe5;
  /* The third paper. --card is white here, so the warm band needs its own name. */
  --tint: #f5efe5;
  --accent-line: #c0a265;
  /* The pale gold. The reference gives the FIRST step in a sequence the solid
     rule and the rest this one, so the eye is told where a sequence starts
     before it reads a word. */
  --accent-line-soft: #e0d3b8;
  --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  /* Bellefair, self-hosted in static/fonts/ like every face here. The fallbacks
     are Hebrew serifs, in the order they are likely to be installed. */
  --display: "Bellefair", "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --hero-bg: #f5efe5; --hero-ink: #221f1a;
}

/* ------------------------------------------------------- hall (direction 15)
   אולם / Hall. Structure in static/site/hall.css. Ported from variant 1a
   ("קלאסי־סמכותי") of design-drops/lawyer-templates-2026-08-30/Lawyer Landing
   Templates.dc.html.

   Sibling to `counsel` and deliberately its opposite in composition: counsel is
   two columns and reads like a letter; this one is CENTRED and reads like a
   masthead. Same trade, two temperaments — a practice that wants to sound
   established rather than personal picks this one.

   --mono is the second use of that token on the platform (lab has the other),
   and here it carries the eyebrows and the figures: the mono face at .2em of
   tracking above a serif headline is the whole reason this direction reads as
   authoritative rather than merely old. */
[data-theme="hall"] {
  --bg: #fdfcfa; --surface: #fdfcfa; --card: #fdfcfa; --ink: #1c1a17; --muted: #5f594f;
  --line: #e3dcd1; --accent: #79654a; --accent-ink: #fdfcfa; --accent-soft: #f0e9dd;
  /* The warm band. Every second section sits on it, which is what gives this
     direction its rhythm without a single rule between sections. */
  --tint: #f7f3ec;
  /* Quoted text sits a step darker than body copy — a testimonial is someone
     else speaking and the design lets you hear that. */
  --ink2: #3b372f;
  /* Captions, the stat labels, the small print. Lighter than --muted on purpose;
     three greys is what stops the centred layout from reading as flat. */
  --faint: #6d685e;
  --line-soft: #ede7dd;
  --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hero-bg: #f7f3ec; --hero-ink: #1c1a17;
}

/* ------------------------------------------------------ stone (direction 16)
   אבן / Stone. Structure in static/site/stone.css. Ported from variant 1d
   ("בוטיק תאגידי") of design-drops/lawyer-templates-2026-08-30/Lawyer Landing
   Templates.dc.html.

   The third of the professional set and the coldest. `counsel` sounds like a
   person, `hall` sounds established, this one sounds like a firm — a strict
   grid, latin monospace labels, and a full-width graphite band of figures.

   --accent is a slate that does NOT want attention: in this design the loudest
   thing is the near-black, and the accent is the quieter of the two buttons.
   That inversion is deliberate and is why --ink doubles as a fill here (see
   .st-cta and .st-figures in the stylesheet) rather than only as text. */
[data-theme="stone"] {
  --bg: #fbfaf8; --surface: #fbfaf8; --card: #fbfaf8; --ink: #1b1e20; --muted: #575b5e;
  --line: #e7e6e1; --accent: #626d75; --accent-ink: #fbfaf8; --accent-soft: #eceef0;
  --tint: #f2f1ee;
  --ink2: #34383a;
  --faint: #686c66;
  /* The border that means "this is a boundary" rather than "this is a row".
     The design uses the near-black for the masthead rule and the first row of a
     list, and a hairline for everything after — that pair is what makes the grid
     read as strict instead of merely ruled. */
  --line-hard: #1b1e20;
  --line-soft: #dad9d3;
  /* On the graphite band. A label at --muted would vanish there. */
  --on-dark: #a3a7a6;
  --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hero-bg: #f2f1ee; --hero-ink: #1b1e20;
}

/* ------------------------------------------------------- grid (direction 06)
   מודול / Grid. Structure in static/site/grid.css. */
[data-theme="grid"] {
  --bg: #ffffff; --surface: #f4f4f2; --card: #f4f4f2; --ink: #111111; --muted: #6b6b6b;
  /* #e5341a read 4.34:1 under white button text (axe) — #d72d13 is the same
     red a notch deeper, 4.9:1, indistinguishable at arm's length. */
  --line: #dcdcdc; --accent: #d72d13; --accent-ink: #ffffff; --accent-soft: #fdece8;
  --radius: 0px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #111111; --hero-ink: #ffffff;
}

/* ---------------------------------------------------- utility (direction 09)
   מוסך / Trade Utility. Structure in static/site/utility.css. */
[data-theme="utility"] {
  --bg: #111111; --surface: #1b1b1b; --card: #1b1b1b; --ink: #ffffff; --muted: #a5a5a0;
  --line: #333333; --accent: #f5c518; --accent-ink: #111111; --accent-soft: #3a3213;
  --radius: 0px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Secular One", "Heebo", sans-serif;
  --hero-bg: #111111; --hero-ink: #ffffff;
}

/* --------------------------------------------------- twodoors (direction 12)
   שתי דלתות / Two Doors. Structure in static/site/twodoors.css. Two accents, not
   one: --door-a and --door-b are the direction's own tokens (same precedent as
   lab's --mono) and are held at matching lightness so neither audience reads as
   the more important one. --accent stays door-a, because that is the single hue
   widget.js is told about for the chat bubble. */
[data-theme="twodoors"] {
  --bg: #12100e; --surface: #1c1a17; --card: #1c1a17; --ink: #f7f4ee; --muted: #a39c90;
  --line: #332f29; --accent: #e8b14c; --accent-ink: #12100e; --accent-soft: #33270f;
  --door-a: #e8b14c; --door-b: #5cc8b0; --door-ink: #12100e;
  /* the third surface: tiles INSIDE the --surface band, which --card cannot be
     here because --card is the band's own value */
  --tile: #282520;
  --radius: 12px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --hero-bg: #12100e; --hero-ink: #f7f4ee;
}

/* -------------------------------------------------------- lab (direction 11)
   מעבדה / Tech Lab. Structure in static/site/lab.css. The one direction with a
   monospace utility face — --mono was declared only here until `hall` took it up
   for its eyebrows and figures. Two directions, two different reasons: lab wants
   instrumentation, hall wants a masthead. */
[data-theme="lab"] {
  --bg: #08090b; --surface: #0f1114; --card: #14171b; --ink: #eef2f4; --muted: #8b959c;
  --line: #22262b; --accent: #3fd6cc; --accent-ink: #08090b; --accent-soft: #10312e;
  --radius: 6px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #08090b; --hero-ink: #eef2f4;
}

/* ------------------------------------------------------- brass (direction 02)
   פנס / Night Brass. Structure in static/site/brass.css. --pool is the lantern
   glow behind the hero; --accent-deep the pressed-button brass. */
[data-theme="brass"] {
  --bg: #171210; --surface: #201914; --card: #201914; --ink: #f2e9dc; --muted: #a89a87;
  --line: #352b22; --accent: #c99a4b; --accent-ink: #1c1409; --accent-soft: #33270f;
  --radius: 8px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #171210; --hero-ink: #f2e9dc;
  --pool: #3d2d14; --accent-deep: #dcb166;
}

/* -------------------------------------------------------- soft (direction 04)
   רך / Soft Organic. Structure in static/site/soft.css. Extra tokens are the
   direction's own (same precedent as lab's --mono): the two secondary blob tints,
   the pressed-button accent, and the card shadow colour. */
[data-theme="soft"] {
  /* muted #8a6e78 sat at 4.45:1 on the cream surfaces (axe) — #806570 keeps
     the dusty mauve and clears 4.5 on both surface and footer bg. */
  --bg: #faf3ee; --surface: #fffbf7; --card: #fffbf7; --ink: #3a2430; --muted: #806570;
  --line: #f0e0d6; --accent: #b0356b; --accent-ink: #ffffff; --accent-soft: #f7dde8;
  --radius: 22px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --hero-bg: #f5e4dc; --hero-ink: #3a2430;
  --blob-2: #fbe9d8; --blob-3: #ecdcf2; --accent-deep: #8f2454; --shadow: #c99bab;
}

/* ------------------------------------------------------ velvet (direction 10)
   קטיפה / Intimate Serif. Structure in static/site/velvet.css. Saturated plum on
   purpose — the review's correction to the cream-and-plum cliché. */
[data-theme="velvet"] {
  --bg: #33162b; --surface: #3e1d34; --card: #3e1d34; --ink: #f4e9ef; --muted: #c3a3b6;
  --line: #533046; --accent: #d9a05b; --accent-ink: #2b1208; --accent-soft: #4a2a1a;
  --radius: 14px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #33162b; --hero-ink: #f4e9ef;
  --accent-deep: #e6b477;
}

/* ------------------------------------------------------ poster (direction 03)
   כרזה / Poster. Structure in static/site/poster.css. Warm paper + vermilion —
   the silkscreen register, deliberately not another dark theme. */
[data-theme="poster"] {
  --bg: #f4e7d3; --surface: #fdf6e9; --card: #fdf6e9; --ink: #171310; --muted: #6e6153;
  --line: #ded0b8; --accent: #e5482b; --accent-ink: #ffffff; --accent-soft: #f8d9ce;
  /* body-size links can't carry the display orange on cream (3.25:1) — they
     use this deeper cut; the huge headline keeps --accent (large-text rules). */
  --accent-deep: #bb3517;
  --radius: 3px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Suez One", "Heebo", serif;
  --hero-bg: #f4e7d3; --hero-ink: #171310;
}

/* ------------------------------------------------------- photo (direction 08)
   מסך / Photo-led. Structure in static/site/photo.css. Light quiet body under a
   cinematic hero; --mesh-* are the duotone fallback hues. */
[data-theme="photo"] {
  --bg: #fbfaf7; --surface: #f2f0ea; --card: #f2f0ea; --ink: #15181d; --muted: #63676e;
  /* #c7402e read 4.38:1 as button text on the card surface (axe) — one notch
     deeper clears it; --accent-deep below stays the pressed state. */
  --line: #e0ddd4; --accent: #bb3b29; --accent-ink: #ffffff; --accent-soft: #f6ddd8;
  --radius: 12px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #15181d; --hero-ink: #ffffff;
  --accent-deep: #a83323; --mesh-a: #c7402e; --mesh-b: #2e4ac7; --mesh-c: #7a2ec7;
}

/* ---------------------------------------------------------------- spa family
   Thirteen designs over one page (static/site/spa.html + spa.css), two or three
   palettes each — 38 in all. Only colour lives here: the geometry and the type weights belong to the
   CUT and are declared in spa.css, so a palette can never accidentally turn the
   quiet design into the loud one.

   Shared additions to the token contract, used only by this family:
     --band-bg / --band-ink  the filled bands. Sections alternate automatically by
                             rendered position, so a section the data doesn't fill
                             cannot leave a gap in the rhythm.
     --well                  the designed field behind an image that isn't there.
     --pop-1…4 / --pop-ink   the pop and cartoon cuts cycle four hues through the
                             cards, the gallery tiles and the feature cells.
   Contrast: every --accent clears 4.5:1 against --surface as link text and against
   --accent-ink as a button; every --pop-* is a light tint carrying --pop-ink. */

/* calm — v1 editorial: arch over the hero photo, warm limestone. */
[data-theme="sand"] {
  --bg: #f8f4ec; --surface: #fffdf8; --card: #fffdf8; --ink: #2a2420; --muted: #6a5f54;
  --line: #e6ddcd; --accent: #a44f38; --accent-ink: #fffdf8; --accent-soft: #f6e3da;
  --accent-deep: #8a3f2c; --radius: 20px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #efe6d6; --hero-ink: #2a2420;
  --band-bg: #33291f; --band-ink: #f5ece1; --well: #e9dfcd; --shadow: #cbb99e;
}
[data-theme="onyx"] {
  --bg: #191512; --surface: #221c18; --card: #221c18; --ink: #f2e9e2; --muted: #a99a8d;
  --line: #322a24; --accent: #e0a6a0; --accent-ink: #1a1310; --accent-soft: #3a2a27;
  --accent-deep: #eebdb7; --radius: 20px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #191512; --hero-ink: #f2e9e2;
  --band-bg: #f2e9e2; --band-ink: #191512; --well: #2b241f; --shadow: #000000;
}
[data-theme="sage"] {
  --bg: #f2f4ef; --surface: #fbfcf9; --card: #fbfcf9; --ink: #1f2a22; --muted: #59665c;
  --line: #dde4d9; --accent: #2f6a4a; --accent-ink: #fbfcf9; --accent-soft: #ddebe1;
  --accent-deep: #245239; --radius: 20px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e6ece2; --hero-ink: #1f2a22;
  --band-bg: #1f2a22; --band-ink: #eef3ec; --well: #e3ebe1; --shadow: #b9c9bc;
}

/* bold — v2: marquee, corner stamp, headline at poster weight. */
[data-theme="neon"] {
  --bg: #191722; --surface: #232130; --card: #232130; --ink: #f4f2ee; --muted: #a6a2b4;
  --line: #322f42; --accent: #c4ef2f; --accent-ink: #17151f; --accent-soft: #2c3320;
  --accent-deep: #d6f95e; --radius: 20px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #191722; --hero-ink: #f4f2ee;
  --band-bg: #c4ef2f; --band-ink: #17151f; --well: #2b2937; --shadow: #000000;
}
[data-theme="flash"] {
  --bg: #f7f4ee; --surface: #fffefb; --card: #fffefb; --ink: #12100f; --muted: #57534d;
  --line: #e3ded3; --accent: #2a35d6; --accent-ink: #fffefb; --accent-soft: #e2e4fb;
  --accent-deep: #1f28ab; --radius: 20px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #ece7dc; --hero-ink: #12100f;
  --band-bg: #12100f; --band-ink: #f7f4ee; --well: #eae5da; --shadow: #c4bcab;
}
[data-theme="mono"] {
  --bg: #ffffff; --surface: #f5f5f5; --card: #f5f5f5; --ink: #0b0b0c; --muted: #56565a;
  --line: #d9d9dc; --accent: #0b0b0c; --accent-ink: #ffffff; --accent-soft: #ebebec;
  --accent-deep: #33333a; --radius: 20px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f0f0f1; --hero-ink: #0b0b0c;
  --band-bg: #0b0b0c; --band-ink: #ffffff; --well: #ebebec; --shadow: #b4b4b8;
}

/* quiet — v3: hairline grids, weight-200 headlines, wide tracking. */
[data-theme="avenue"] {
  --bg: #f2f0ea; --surface: #f8f7f2; --card: #f8f7f2; --ink: #262521; --muted: #5e5d53;
  --line: #dcd9cf; --accent: #4f5a3c; --accent-ink: #f8f7f2; --accent-soft: #e4e6d8;
  --accent-deep: #3d4630; --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e8e5dc; --hero-ink: #262521;
  --band-bg: #262521; --band-ink: #ece9e0; --well: #e6e3d9; --shadow: #c3bfb2;
}
[data-theme="ivory"] {
  --bg: #f7f2ec; --surface: #fdfaf6; --card: #fdfaf6; --ink: #2b2320; --muted: #6a5b52;
  --line: #e7dcd2; --accent: #9c5a3f; --accent-ink: #fdfaf6; --accent-soft: #f2e0d5;
  --accent-deep: #7f4831; --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #eee4d9; --hero-ink: #2b2320;
  --band-bg: #2b2320; --band-ink: #f4ebe3; --well: #ece1d6; --shadow: #cdb9a8;
}
[data-theme="slate"] {
  --bg: #191c1e; --surface: #212528; --card: #212528; --ink: #eef1f0; --muted: #99a2a2;
  --line: #2e3336; --accent: #a8bda4; --accent-ink: #16191a; --accent-soft: #2b332c;
  --accent-deep: #bfd0bb; --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #191c1e; --hero-ink: #eef1f0;
  --band-bg: #eef1f0; --band-ink: #191c1e; --well: #272c2f; --shadow: #000000;
}

/* pop — v4: hard outlines, offset shadows, four hues in rotation. */
[data-theme="candy"] {
  --bg: #fdf7e4; --surface: #fffdf5; --card: #fffdf5; --ink: #22202b; --muted: #5c5869;
  --line: #e5ddc8; --accent: #c8347c; --accent-ink: #fffdf5; --accent-soft: #fbdcea;
  --accent-deep: #a82865; --radius: 20px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #9fe0ea; --hero-ink: #22202b;
  --band-bg: #c8347c; --band-ink: #fffdf5; --well: #fbe6f0; --shadow: #22202b;
  --pop-1: #f7d3e8; --pop-2: #a8e4ef; --pop-3: #f4e06a; --pop-4: #cfe8b4;
  --pop-ink: #22202b;
}
[data-theme="citrus"] {
  --bg: #fef6e7; --surface: #fffdf6; --card: #fffdf6; --ink: #241f1b; --muted: #635a4f;
  --line: #ece0c9; --accent: #b64a17; --accent-ink: #fffdf6; --accent-soft: #fbe3d2;
  --accent-deep: #963a10; --radius: 20px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #ffd9a0; --hero-ink: #241f1b;
  --band-bg: #b64a17; --band-ink: #fffdf6; --well: #fbeada; --shadow: #241f1b;
  --pop-1: #ffd9a0; --pop-2: #f6e07a; --pop-3: #a9e3d8; --pop-4: #f9c3a3;
  --pop-ink: #241f1b;
}
[data-theme="berry"] {
  --bg: #1b1725; --surface: #241f30; --card: #241f30; --ink: #f4eff7; --muted: #a49bb2;
  --line: #342d44; --accent: #e76bb4; --accent-ink: #1b1725; --accent-soft: #3a2a3c;
  --accent-deep: #f191c9; --radius: 20px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #33245c; --hero-ink: #f4eff7;
  --band-bg: #e76bb4; --band-ink: #1b1725; --well: #2e2740; --shadow: #000000;
  --pop-1: #e9a8dc; --pop-2: #a9b6f5; --pop-3: #f5c98f; --pop-4: #9fe6d2;
  --pop-ink: #1b1725;
}

/* cartoon — v5: the pop cut with a sticker's physics. Secular One headlines and
   Rubik 500 pills stand in for the design's Fredoka, which has no Hebrew cut. */
[data-theme="sticker"] {
  --bg: #fdf6e3; --surface: #fffef8; --card: #fffef8; --ink: #241f2e; --muted: #5d5766;
  --line: #ece2c9; --accent: #c2356f; --accent-ink: #fffef8; --accent-soft: #fbdce8;
  --accent-deep: #a12b5b; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Secular One", "Rubik", sans-serif;
  --mono: "Rubik", system-ui, sans-serif;
  --hero-bg: #93dced; --hero-ink: #241f2e;
  --band-bg: #c2356f; --band-ink: #fffef8; --well: #fbe4ef; --shadow: #241f2e;
  --pop-1: #f7cfe4; --pop-2: #a5e2f0; --pop-3: #f6e278; --pop-4: #b9e8b0;
  --pop-ink: #241f2e;
}
[data-theme="bubble"] {
  --bg: #fffdfa; --surface: #ffffff; --card: #ffffff; --ink: #2a2536; --muted: #5e5872;
  --line: #ece7f4; --accent: #6d3fbd; --accent-ink: #ffffff; --accent-soft: #ece2fb;
  --accent-deep: #57309c; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Secular One", "Rubik", sans-serif;
  --mono: "Rubik", system-ui, sans-serif;
  --hero-bg: #cfeee2; --hero-ink: #2a2536;
  --band-bg: #6d3fbd; --band-ink: #ffffff; --well: #f3edfb; --shadow: #2a2536;
  --pop-1: #d8f0e6; --pop-2: #e6dcfa; --pop-3: #ffe0cf; --pop-4: #fdf0c8;
  --pop-ink: #2a2536;
}
[data-theme="comic"] {
  --bg: #1a1b2e; --surface: #23253c; --card: #23253c; --ink: #f3f1fa; --muted: #a2a3bd;
  --line: #333552; --accent: #f5c93a; --accent-ink: #1a1b2e; --accent-soft: #3a3520;
  --accent-deep: #ffe071; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Secular One", "Rubik", sans-serif;
  --mono: "Rubik", system-ui, sans-serif;
  --hero-bg: #2a2d4d; --hero-ink: #f3f1fa;
  --band-bg: #f5c93a; --band-ink: #1a1b2e; --well: #2c2f4a; --shadow: #000000;
  --pop-1: #f5c93a; --pop-2: #ef6a5a; --pop-3: #7fd0f5; --pop-4: #a9e2a0;
  --pop-ink: #1a1b2e;
}

/* men — v6: hairline grid, square corners, the numbers as cells. */
[data-theme="barber"] {
  --bg: #23262b; --surface: #2a2e34; --card: #2a2e34; --ink: #ededea; --muted: #9ba1a8;
  --line: #383d44; --accent: #c79a5e; --accent-ink: #1d2024; --accent-soft: #35302a;
  --accent-deep: #dbb27a; --radius: 0px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #23262b; --hero-ink: #ededea;
  --band-bg: #c79a5e; --band-ink: #1d2024; --well: #30343a; --shadow: #000000;
}
[data-theme="concrete"] {
  --bg: #ecebe7; --surface: #f7f6f3; --card: #f7f6f3; --ink: #1f2225; --muted: #5d6167;
  --line: #dbd9d3; --accent: #8a5a2b; --accent-ink: #f7f6f3; --accent-soft: #efe3d5;
  --accent-deep: #6f4720; --radius: 0px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e2e0da; --hero-ink: #1f2225;
  --band-bg: #1f2225; --band-ink: #ecebe7; --well: #e4e2dc; --shadow: #b8b6ae;
}

/* kids — v7: soft radii, no outlines, a hue per card, the tag read as an age. */
[data-theme="peach"] {
  --bg: #fdf7ec; --surface: #fffdf7; --card: #fffdf7; --ink: #33291f; --muted: #6d5c4a;
  /* #b85f2e read 4.38:1 as a link on the cream surface and under white button
     text — #ac5325 is the same apricot a notch deeper and clears 4.5 on both. */
  --line: #eadfcc; --accent: #ac5325; --accent-ink: #fffdf7; --accent-soft: #fae3d3;
  --accent-deep: #8d4119; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f7e7d4; --hero-ink: #33291f;
  --band-bg: #ac5325; --band-ink: #fffdf7; --well: #f6e6d5; --shadow: #d8bda2;
  --pop-1: #fadfc4; --pop-2: #d9ecc9; --pop-3: #fbeec4; --pop-4: #f6d8d0;
  --pop-ink: #33291f;
}
[data-theme="meadow"] {
  --bg: #f4f7ef; --surface: #fbfcf8; --card: #fbfcf8; --ink: #252e22; --muted: #576050;
  --line: #dfe7d7; --accent: #3f6e36; --accent-ink: #fbfcf8; --accent-soft: #e0eed9;
  --accent-deep: #315628; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e5efdd; --hero-ink: #252e22;
  --band-bg: #3f6e36; --band-ink: #fbfcf8; --well: #e6efe0; --shadow: #bccdb4;
  --pop-1: #d9ecc9; --pop-2: #fbeec4; --pop-3: #cfe7e2; --pop-4: #f3ddc8;
  --pop-ink: #252e22;
}
[data-theme="sky"] {
  --bg: #f1f6fa; --surface: #fbfdfe; --card: #fbfdfe; --ink: #1f2a31; --muted: #556269;
  --line: #d8e5ee; --accent: #26647f; --accent-ink: #fbfdfe; --accent-soft: #d9ebf3;
  --accent-deep: #1c4f66; --radius: 26px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e0edf5; --hero-ink: #1f2a31;
  --band-bg: #26647f; --band-ink: #fbfdfe; --well: #e3eff6; --shadow: #b3c8d6;
  --pop-1: #d3e8f5; --pop-2: #e3ddf3; --pop-3: #fbeec4; --pop-4: #d5eae0;
  --pop-ink: #1f2a31;
}

/* mobile — v8: booking card in the hero, three steps, service areas as chips. */
[data-theme="breeze"] {
  --bg: #f7fafb; --surface: #ffffff; --card: #ffffff; --ink: #212a2e; --muted: #566268;
  --line: #dde7ea; --accent: #2a7183; --accent-ink: #ffffff; --accent-soft: #dcedf1;
  --accent-deep: #1f5a69; --radius: 12px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f7fafb; --hero-ink: #212a2e;
  --band-bg: #212a2e; --band-ink: #eef4f6; --well: #e6eff2; --shadow: #b6c8ce;
}
[data-theme="dusk"] {
  --bg: #1a2028; --surface: #222932; --card: #222932; --ink: #edf3f5; --muted: #98a4ac;
  --line: #2f3742; --accent: #69c7d6; --accent-ink: #14191f; --accent-soft: #24363c;
  --accent-deep: #8ad8e4; --radius: 12px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #1a2028; --hero-ink: #edf3f5;
  --band-bg: #edf3f5; --band-ink: #1a2028; --well: #28303a; --shadow: #000000;
}
[data-theme="linen"] {
  --bg: #f6f4ee; --surface: #fdfcf8; --card: #fdfcf8; --ink: #262620; --muted: #605f51;
  --line: #e3e0d5; --accent: #5d6b3a; --accent-ink: #fdfcf8; --accent-soft: #e7ebd9;
  --accent-deep: #4a562c; --radius: 12px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #efece2; --hero-ink: #262620;
  --band-bg: #262620; --band-ink: #f0ede4; --well: #ebe8dd; --shadow: #c2beaf;
}

/* editorial — v9: hairline rules, two-column story, pull-quote, photo spread. */
[data-theme="press"] {
  --bg: #f7f5ef; --surface: #fdfcf8; --card: #fdfcf8; --ink: #1f1d1a; --muted: #5f5a52;
  --line: #ddd8cc; --accent: #7d4a35; --accent-ink: #fdfcf8; --accent-soft: #eee3d9;
  --accent-deep: #653827; --radius: 0px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f7f5ef; --hero-ink: #1f1d1a;
  --band-bg: #ece8dd; --band-ink: #1f1d1a; --well: #e8e3d6; --shadow: #c6c0b0;
}
[data-theme="ink"] {
  --bg: #17181a; --surface: #1f2023; --card: #1f2023; --ink: #f1eee8; --muted: #a09c94;
  --line: #2c2e32; --accent: #cbb089; --accent-ink: #17181a; --accent-soft: #322d24;
  --accent-deep: #ddc6a4; --radius: 0px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #17181a; --hero-ink: #f1eee8;
  --band-bg: #23252a; --band-ink: #f1eee8; --well: #26282c; --shadow: #000000;
}
[data-theme="marble"] {
  --bg: #f4f5f6; --surface: #fcfcfd; --card: #fcfcfd; --ink: #1b1e22; --muted: #575d65;
  --line: #dcdfe3; --accent: #3d4854; --accent-ink: #fcfcfd; --accent-soft: #e3e6ea;
  --accent-deep: #2c343d; --radius: 0px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f4f5f6; --hero-ink: #1b1e22;
  --band-bg: #e7e9ec; --band-ink: #1b1e22; --well: #e4e7ea; --shadow: #bcc1c7;
}

/* clinical — v10: licence chip, a grid of figures, standards, team. */
[data-theme="clinic"] {
  --bg: #fafcfd; --surface: #ffffff; --card: #ffffff; --ink: #20262e; --muted: #545e6a;
  --line: #dee5ec; --accent: #2d5fa8; --accent-ink: #ffffff; --accent-soft: #e2ebf7;
  --accent-deep: #234b85; --radius: 10px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #fafcfd; --hero-ink: #20262e;
  --band-bg: #20262e; --band-ink: #eef2f6; --well: #e8eef4; --shadow: #b9c6d3;
}
[data-theme="graphite"] {
  --bg: #1c1f24; --surface: #24282e; --card: #24282e; --ink: #edf1f5; --muted: #98a2ae;
  --line: #31363d; --accent: #8fb8e8; --accent-ink: #161a1f; --accent-soft: #26313d;
  --accent-deep: #aecdf2; --radius: 10px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #1c1f24; --hero-ink: #edf1f5;
  --band-bg: #edf1f5; --band-ink: #1c1f24; --well: #2a2f36; --shadow: #000000;
}
[data-theme="porcelain"] {
  --bg: #faf8f5; --surface: #ffffff; --card: #ffffff; --ink: #22262b; --muted: #5a6068;
  --line: #e3e0da; --accent: #4a6072; --accent-ink: #ffffff; --accent-soft: #e5eaee;
  --accent-deep: #384b5b; --radius: 10px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f3f0eb; --hero-ink: #22262b;
  --band-bg: #22262b; --band-ink: #f1efec; --well: #ece9e4; --shadow: #c3bfb8;
}

/* retro — v11: two-pixel outlines, pill everything, a colour per card, 1970s. */
[data-theme="butter"] {
  --bg: #f0e3c2; --surface: #fdf6e3; --card: #fdf6e3; --ink: #3a2b1e; --muted: #6b5843;
  --line: #d9c8a2; --accent: #b04a26; --accent-ink: #fdf6e3; --accent-soft: #f5ddc9;
  --accent-deep: #8f3a1c; --radius: 18px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Suez One", "Heebo", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f0e3c2; --hero-ink: #3a2b1e;
  --band-bg: #b04a26; --band-ink: #fdf6e3; --well: #ecdcb8; --shadow: #3a2b1e;
  --pop-1: #f2d79a; --pop-2: #a8d8cf; --pop-3: #f3c39d; --pop-4: #dfe0a8;
  --pop-ink: #3a2b1e;
}
[data-theme="avocado"] {
  --bg: #eae8d2; --surface: #f8f7ea; --card: #f8f7ea; --ink: #2e2e22; --muted: #5c5c45;
  --line: #d2d0b4; --accent: #5e6b2c; --accent-ink: #f8f7ea; --accent-soft: #e4e8c9;
  --accent-deep: #4a5522; --radius: 18px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Suez One", "Heebo", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #eae8d2; --hero-ink: #2e2e22;
  --band-bg: #5e6b2c; --band-ink: #f8f7ea; --well: #e3e1c8; --shadow: #2e2e22;
  --pop-1: #dfe2ab; --pop-2: #f2d79a; --pop-3: #b8d6c0; --pop-4: #eec9a4;
  --pop-ink: #2e2e22;
}
[data-theme="denim"] {
  --bg: #e7e9ec; --surface: #f8f9fa; --card: #f8f9fa; --ink: #232a31; --muted: #545d67;
  --line: #ccd2d9; --accent: #2f5c7e; --accent-ink: #f8f9fa; --accent-soft: #dce6ee;
  --accent-deep: #244a67; --radius: 18px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Suez One", "Heebo", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #e7e9ec; --hero-ink: #232a31;
  --band-bg: #2f5c7e; --band-ink: #f8f9fa; --well: #dfe3e8; --shadow: #232a31;
  --pop-1: #cfdce8; --pop-2: #f3c9a3; --pop-3: #dfe0a8; --pop-4: #c9dcd8;
  --pop-ink: #232a31;
}

/* organic — v12: blob shapes throughout, the airiest headlines, ingredients band. */
[data-theme="olive"] {
  --bg: #f1f0e4; --surface: #f9f9f0; --card: #f9f9f0; --ink: #2b3327; --muted: #566050;
  --line: #dbdcc9; --accent: #4b6b3f; --accent-ink: #f9f9f0; --accent-soft: #e2e9d9;
  --accent-deep: #3a5430; --radius: 22px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f1f0e4; --hero-ink: #2b3327;
  --band-bg: #3a4a35; --band-ink: #eef2e9; --well: #e5e6d5; --shadow: #c3c5ae;
  --pop-1: #dde3cd; --pop-2: #e8e3cd; --pop-3: #cfdcd2; --pop-4: #e5dcc6;
  --pop-ink: #2b3327;
}
[data-theme="clay"] {
  --bg: #f5eee6; --surface: #fdf9f4; --card: #fdf9f4; --ink: #33291f; --muted: #6a5c4d;
  --line: #e6dbcc; --accent: #9a5b3f; --accent-ink: #fdf9f4; --accent-soft: #f1e1d5;
  --accent-deep: #7d4630; --radius: 22px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #f5eee6; --hero-ink: #33291f;
  --band-bg: #4a3a2c; --band-ink: #f4ece2; --well: #ece2d6; --shadow: #cdbfae;
  --pop-1: #eddfd0; --pop-2: #dfe3d2; --pop-3: #f0e4cf; --pop-4: #e3d6cd;
  --pop-ink: #33291f;
}
[data-theme="moss"] {
  --bg: #1b2320; --surface: #232d29; --card: #232d29; --ink: #ebf0e7; --muted: #9aa596;
  --line: #2f3a35; --accent: #9dc08b; --accent-ink: #17201c; --accent-soft: #2b3a2e;
  --accent-deep: #b5d3a5; --radius: 22px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #1b2320; --hero-ink: #ebf0e7;
  --band-bg: #ebf0e7; --band-ink: #1b2320; --well: #28332e; --shadow: #000000;
  --pop-1: #2e3b32; --pop-2: #34402f; --pop-3: #2b3a38; --pop-4: #3a3d2e;
  --pop-ink: #ebf0e7;
}

/* desk — v13: the page as a booking counter, summary card pinned beside it. */
[data-theme="desk"] {
  --bg: #fafbfc; --surface: #ffffff; --card: #ffffff; --ink: #1e2128; --muted: #565c66;
  --line: #e2e5ea; --accent: #3d51b5; --accent-ink: #ffffff; --accent-soft: #e6e9f8;
  --accent-deep: #31419a; --radius: 10px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #ffffff; --hero-ink: #1e2128;
  --band-bg: #1e2128; --band-ink: #eef0f4; --well: #eceff3; --shadow: #bcc2cc;
}
[data-theme="shift"] {
  --bg: #181b21; --surface: #1f232a; --card: #1f232a; --ink: #eef0f5; --muted: #979daa;
  --line: #2b303a; --accent: #93a6f5; --accent-ink: #14171c; --accent-soft: #262e40;
  --accent-deep: #aebcf9; --radius: 10px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #1f232a; --hero-ink: #eef0f5;
  --band-bg: #eef0f5; --band-ink: #181b21; --well: #252a32; --shadow: #000000;
}
[data-theme="paper"] {
  --bg: #f8f6f1; --surface: #fffefb; --card: #fffefb; --ink: #252119; --muted: #625b4d;
  --line: #e5e0d5; --accent: #7a5c2e; --accent-ink: #fffefb; --accent-soft: #eee5d3;
  --accent-deep: #614821; --radius: 10px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Assistant", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero-bg: #fffefb; --hero-ink: #252119;
  --band-bg: #252119; --band-ink: #f2eee5; --well: #eeeade; --shadow: #c7c0b0;
}

/* --------------------------------------------------- brightness counterparts
   The visitor toggle (data-site on <html>, see site_business.html). Each
   direction gets ONE hand-tuned counterpart — the opposite of its native mode;
   the native mode is simply the theme's own tokens above. Only the neutrals and
   the accent move; type, radius and structure stay, so dark ledger is still
   ledger. Legacy token themes hardcode colours in their structural rules and get
   no counterpart (Theme.modes=False hides their toggle). */

/* ledger, natively light → warm night paper; the teal lifts to stay legible. */
html[data-site="dark"][data-theme="ledger"] {
  --bg: #191813; --surface: #211f19; --card: #211f19; --ink: #ebe7dc; --muted: #a19c8e;
  --line: #383429; --accent: #8ec2ba; --accent-ink: #122421; --accent-soft: #22403b;
  --hero-bg: #242219; --hero-ink: #ebe7dc;
}
html[data-site="dark"][data-theme="ledger"] .l-btn-p:hover { background: #a6d2ca; }

/* grid, natively light → the stark contrast inverts: dark page, light hero. */
html[data-site="dark"][data-theme="grid"] {
  --bg: #121212; --surface: #1d1d1d; --card: #1d1d1d; --ink: #f2f2f0; --muted: #9f9f9c;
  --line: #303030; --accent: #ff6a4e; --accent-ink: #210704; --accent-soft: #3d150d;
  --hero-bg: #f2f2f0; --hero-ink: #121212;
}
html[data-site="dark"][data-theme="grid"] .g-btn-p:hover { background: #ff8168; border-color: #ff8168; }

/* utility, natively dark → workshop paper; the yellow deepens to a readable
   mustard. The hero lights up with the rest — anchors inside it are coloured by
   --ink, so a dark band with light ink would swallow the poster phone; the
   hazard stripe and the mustard carry the trade identity instead. */
html[data-site="light"][data-theme="utility"] {
  --bg: #f6f5f0; --surface: #ffffff; --card: #ffffff; --ink: #1a1914; --muted: #6d6a60;
  /* pre-audit: #8a6f00 read 4.41:1 as text on the light ground — one notch deeper */
  --line: #ddd9cc; --accent: #7d6500; --accent-ink: #ffffff; --accent-soft: #f1e9c8;
  --hero-bg: #eceadf; --hero-ink: #1a1914;
}
html[data-site="light"][data-theme="utility"] .u-btn-f:hover { background: #a3840a; border-color: #a3840a; }

/* brass, natively dark → warm daylight paper: cream grounds, the brass deepens
   to a readable bronze and the lantern pool becomes a soft amber halo. */
html[data-site="light"][data-theme="brass"] {
  --bg: #f7f2e9; --surface: #fffcf5; --card: #fffcf5; --ink: #241c14; --muted: #77685a;
  --line: #e4dac7; --accent: #8a6320; --accent-ink: #ffffff; --accent-soft: #f0e5cb;
  --hero-bg: #f7f2e9; --hero-ink: #241c14;
  --pool: #f3e3bd; --accent-deep: #6f4f18;
}

/* velvet, natively saturated-dark → powder morning: the plum pales to rose
   paper, the brass deepens to bronze for contrast. */
html[data-site="light"][data-theme="velvet"] {
  --bg: #f6ecf2; --surface: #fdf7fa; --card: #fdf7fa; --ink: #33162b; --muted: #7d5f72;
  --line: #e5d2dd; --accent: #96601c; --accent-ink: #ffffff; --accent-soft: #f0e2cc;
  --hero-bg: #f6ecf2; --hero-ink: #33162b;
  --accent-deep: #7a4e15;
}

/* poster, natively warm paper → the night edition: near-black field, the
   vermilion burns brighter, paper ink flips to bone. */
html[data-site="dark"][data-theme="poster"] {
  --bg: #191411; --surface: #241d18; --card: #241d18; --ink: #f2e8d8; --muted: #a4988a;
  --line: #3a322a; --accent: #ff5c3c; --accent-ink: #240b05; --accent-soft: #45180e;
  /* the light mode's deep body-link cut is unreadable on the night ground
     (3.16:1, pre-audit) — dark mode lifts it instead */
  --accent-deep: #ff8560;
  --hero-bg: #191411; --hero-ink: #f2e8d8;
}

/* photo, natively light-bodied → dark cinema body; the hero was dark already. */
html[data-site="dark"][data-theme="photo"] {
  --bg: #131519; --surface: #1c1f24; --card: #1c1f24; --ink: #eef0f2; --muted: #969ba3;
  --line: #2c3037; --accent: #ff6a52; --accent-ink: #2a0c05; --accent-soft: #3c1a12;
  --hero-bg: #0e1013; --hero-ink: #ffffff;
  --accent-deep: #ff8971; --mesh-a: #b83a29; --mesh-b: #2a43b0; --mesh-c: #6e29b0;
}

/* soft, natively blush → plum evening: cocoa grounds, the raspberry lifts to
   rose, blobs deepen to wine tints so the field stays a field, not mud. */
html[data-site="dark"][data-theme="soft"] {
  --bg: #241820; --surface: #2e2029; --card: #2e2029; --ink: #f4e6ec; --muted: #bd9aa9;
  --line: #45303c; --accent: #e77ea8; --accent-ink: #33101f; --accent-soft: #4a2637;
  --hero-bg: #2a1c24; --hero-ink: #f4e6ec;
  --blob-2: #3a2430; --blob-3: #35263f; --accent-deep: #f095b9; --shadow: #120a0f;
}

/* lab, natively dark → light instrument panel; the cyan deepens for contrast. */
html[data-site="light"][data-theme="lab"] {
  --bg: #f2f4f5; --surface: #ffffff; --card: #ffffff; --ink: #101417; --muted: #5d6870;
  /* pre-audit: #0d8b82 carried only 4.17:1 both as text and under white — the
     deeper teal clears 4.5 in both directions of use */
  --line: #d7dde0; --accent: #0b7168; --accent-ink: #ffffff; --accent-soft: #d3edea;
  --hero-bg: #e8ecee; --hero-ink: #101417;
}

/* twodoors, natively dark → warm paper. Both accents have to move and by
   different amounts: measured on white, the design's amber carries 1.66:1 and the
   mint 2.03:1, so each is deepened until it clears 4.5 as text AND under white as
   a button fill (amber 5.92, mint 6.39). Their LIGHTNESS is still matched to each
   other, which is the rule the pair exists to keep. */
html[data-site="light"][data-theme="twodoors"] {
  --bg: #f7f4ee; --surface: #ffffff; --card: #ffffff; --ink: #1b1917; --muted: #6c645a;
  --line: #e4ded3; --accent: #8a5a0b; --accent-ink: #ffffff; --accent-soft: #f4e7cf;
  --door-a: #8a5a0b; --door-b: #116b5d; --door-ink: #ffffff;
  --tile: #f0ece3;
  --hero-bg: #f0ece3; --hero-ink: #1b1917;
}

/* ------------------------------------------ the program family (5 palettes)
   kitchen · dossier · tracks · field · method. Structure in
   static/site/program.css; only the tokens live here, so the platform and the
   admin portal can drive them.

   One palette per cut, deliberately — this family's variety is STRUCTURAL, and
   five near-identical colourways of five different pages would have made the
   picker read as twenty-five options and offered five. The spa family's
   one-card-per-design rule, applied at the registry rather than in the picker.

   Every pair the template puts together clears WCAG AA; the numbers below were
   measured on 2026-09-08 with the same maths as tests/test_program_family.py,
   which re-measures them on every run rather than trusting this comment.

   --accent-mute, in all five: the QUIET accent, and the token that exists because
   --accent-soft is a GROUND (a plate, a lane, a rule) and is far too pale to
   carry a glyph. `field` set its 66px step numerals in the soft token and they
   came back at 1.29:1 — visible as a smudge, unreadable as a number, and they are
   what tells a reader the order of a process. --accent-mute is the step between:
   at least 3.2:1 on its own palette's --bg, which clears WCAG's large-text floor
   of 3:1 with margin while still reading as a ghost rather than as something you
   can press. Said once here rather than five times below, so correcting it is one
   edit. */

/* Her own brand sheet, and the reason this family exists: warm cream, burgundy,
   sage. --band-bg is the ACCENT here and not an ink — the process band on this
   cut is inverted onto the burgundy, which is what gives an otherwise gentle
   page one moment of weight. */
[data-theme="kitchen"] {
  --bg: #fbf1e8; --surface: #fffbf6; --card: #fffbf6; --ink: #4a3a37; --muted: #6b5c57;
  --line: #ebd9d2; --accent: #7a2e3a; --accent-ink: #fffbf6; --accent-soft: #f3d7d7;
  --tint: #fffbf6; --radius: 18px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #fbf1e8; --hero-ink: #4a3a37;
  --band-bg: #7a2e3a; --band-ink: #fbf1e8; --well: #f3e5da; --shadow: #d9c3b8;
  --accent-mute: #ac7a7e;
}

/* Paper. --radius is 0 and that is the direction, not an oversight: this cut's
   whole argument is that a practitioner with no photographs still gets a page
   that looks finished, and a softened corner reads as decoration standing in for
   the picture that isn't there. */
[data-theme="dossier"] {
  --bg: #fcfaf6; --surface: #ffffff; --card: #ffffff; --ink: #2e2a26; --muted: #665d53;
  --line: #ded6c8; --accent: #4f6b4b; --accent-ink: #fcfaf6; --accent-soft: #e9efe6;
  --tint: #f6f2ea; --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #fcfaf6; --hero-ink: #2e2a26;
  --band-bg: #3a342f; --band-ink: #ede5da; --well: #f1ece1; --shadow: #cdc4b3;
  --accent-mute: #7e9279;
}

/* Two lanes, and the two tokens that draw them: --accent-soft is the first
   audience's ground and --tint the second's. They are a PAIR here, matched in
   lightness so neither lane reads as the important one — an owner writes the two
   cards in whatever order they think of them, and the design must not turn that
   order into a hierarchy. */
[data-theme="tracks"] {
  --bg: #fbf1e8; --surface: #fffbf6; --card: #fffbf6; --ink: #42332f; --muted: #6b5c57;
  --line: #e9d8d1; --accent: #a0455a; --accent-ink: #fffbf6; --accent-soft: #f5dcdc;
  --tint: #e4ede1; --radius: 20px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #fbf1e8; --hero-ink: #42332f;
  --band-bg: #4e6b4a; --band-ink: #f2f7f0; --well: #f2e6df; --shadow: #d6bfb8;
  --accent-mute: #b97380;
}

/* The loud one. --hero-bg is DARK while --bg stays cream, which is the whole
   composition: the page opens on a plum field with the headline over it and then
   drops onto paper. --hero-ink therefore has to be the light one, and every
   header and hero rule in program.css reads it rather than --ink. */
[data-theme="field"] {
  --bg: #fbf1e8; --surface: #fffbf6; --card: #fffbf6; --ink: #3a2c2a; --muted: #6b5c57;
  --line: #e4d2cb; --accent: #8e3a46; --accent-ink: #fbf1e8; --accent-soft: #f0cfd3;
  --tint: #f5dcdc; --radius: 0px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #5c1f2a; --hero-ink: #fbf1e8;
  --band-bg: #3c1219; --band-ink: #f3d7d7; --well: #f4e2da; --shadow: #d3b3ae;
  --accent-mute: #b2767b;
}

/* The cool one, and the only palette in the family that is not built out of her
   brand: this cut is for the buyer reading to understand HOW the thing works, so
   its accent is a structural slate-teal rather than a warm one. The family holds
   together on type and layout, not on hue. */
[data-theme="method"] {
  --bg: #ffffff; --surface: #fcfaf8; --card: #ffffff; --ink: #2f2a26; --muted: #655c56;
  --line: #ede6e0; --accent: #345a63; --accent-ink: #ffffff; --accent-soft: #e4eef0;
  --tint: #f4f8f2; --radius: 12px;
  --font: "Assistant", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
  --hero-bg: #fcfaf8; --hero-ink: #2f2a26;
  --band-bg: #2b4a52; --band-ink: #eef6f7; --well: #f4f1ee; --shadow: #ccc4bd;
  --accent-mute: #7b949a;
}

/* ---------------------------------------------------------------- 1. clean */
[data-theme="clean"] {
  --bg: #fcfcfa; --card: #ffffff; --ink: #16202a; --muted: #66727f;
  --line: #e2e6ea; --accent: #1f5fa9; --accent-soft: #eaf1f9;
  --radius: 10px;
  --font: system-ui, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --display: var(--font);
}
[data-theme="clean"] .site-page .hero {
  background: var(--bg); color: var(--ink); text-align: start;
  padding: 4rem 1.2rem 2rem; max-width: 46rem; margin: 0 auto;
}
/* The signature: a rule that starts at the page edge and stops under the name —
   the only ornament in an otherwise bare layout. */
[data-theme="clean"] .site-page .hero h1::after {
  content: ""; display: block; width: 4.5rem; height: 3px;
  background: var(--accent); margin-top: 1rem;
}
[data-theme="clean"] .site-page .hero .lead { color: var(--muted); margin-inline: 0; }
[data-theme="clean"] .site-page section { border-top: 1px solid var(--line); padding-top: 1.6rem; }

/* ----------------------------------------------------------------- 2. dark */
[data-theme="dark"] {
  --bg: #0e1116; --card: #161b22; --ink: #eceff3; --muted: #99a3af;
  --line: #232a33; --accent: #f0a03c; --accent-soft: #2a2117;
  --radius: 12px;
  --font: system-ui, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --display: var(--font);
}
[data-theme="dark"] .site-page .hero {
  /* A pool of light behind the name rather than a flat block. */
  background: radial-gradient(120% 80% at 50% 0%, #1d2530 0%, #0e1116 70%);
  color: var(--ink); padding: 5rem 1.2rem 3rem;
}
[data-theme="dark"] .site-page .btn { background: var(--accent); color: #17120a; }
[data-theme="dark"] .site-page .btn.ghost-btn {
  background: transparent; color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .site-page .hero-cta .btn:first-child {
  box-shadow: 0 0 0 6px rgba(240, 160, 60, .12);
}
[data-theme="dark"] .site-page .services li { background: var(--card); border-color: var(--line); }

/* ----------------------------------------------------------- 3. futuristic */
[data-theme="futuristic"] {
  --bg: #171233; --card: rgba(255, 255, 255, .06); --ink: #eae7ff; --muted: #a79fd6;
  --line: rgba(255, 255, 255, .14); --accent: #7c5cff; --accent-soft: rgba(124, 92, 255, .18);
  --radius: 18px;
  --font: "Heebo", system-ui, "Arial Hebrew", sans-serif;
  --display: "Heebo", system-ui, sans-serif;
}
[data-theme="futuristic"] .site-page {
  background:
    linear-gradient(180deg, rgba(60, 232, 224, .10), transparent 30%),
    radial-gradient(100% 60% at 80% 0%, #2b1e66 0%, #171233 60%);
  background-attachment: fixed;
}
[data-theme="futuristic"] .site-page .hero {
  background: transparent; padding: 5rem 1.2rem 3rem;
  /* A faint grid, the one nod to the "product" world this theme is for. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
}
[data-theme="futuristic"] .site-page .hero h1 { font-weight: 900; letter-spacing: -.02em; }
[data-theme="futuristic"] .site-page .facts > div,
[data-theme="futuristic"] .site-page details,
[data-theme="futuristic"] .site-page .box {
  background: var(--card); backdrop-filter: blur(12px); border-color: var(--line);
}
[data-theme="futuristic"] .site-page .services { gap: .45rem; }
[data-theme="futuristic"] .site-page .services li {
  background: var(--accent-soft); border-color: transparent; color: var(--ink);
  letter-spacing: .02em;
}
/* --btn-text, not --accent: the fill under white text needs the same 4.5:1 the
   text on a white pill does, and the raw violet is 4.3:1. base.html derives it. */
[data-theme="futuristic"] .site-page .btn { background: var(--btn-text); color: #fff; }

/* -------------------------------------------------------------- 4. service */
[data-theme="service"] {
  --bg: #ffffff; --card: #f4f7fa; --ink: #10243a; --muted: #5b6b7c;
  --line: #d8e0e8; --accent: #123a63; --accent-soft: #fff6da;
  --radius: 6px;
  --font: system-ui, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --display: var(--font);
}
[data-theme="service"] .site-page .hero {
  background: var(--accent); color: #fff; padding: 3rem 1.2rem;
}
/* The deliberate risk: on a tradesperson's page the PHONE NUMBER is the largest
   thing, larger than the business name. That is what the visitor came for. */
[data-theme="service"] .site-page .hero h1 { font-size: 1.4rem; opacity: .92; font-weight: 600; }
[data-theme="service"] .site-page .hero .lead { font-size: 1rem; opacity: .85; }
[data-theme="service"] .site-page .hero-cta .btn:first-child {
  font-size: 1.6rem; font-weight: 800; padding: .8rem 1.6rem; border-radius: 6px;
  background: #ffc533; color: #10243a; direction: ltr;
}
[data-theme="service"] .site-page .services li {
  background: var(--card); border-radius: 6px; font-weight: 600;
}
/* Sticky call bar on phones — the whole page is one call to action. */
@media (max-width: 640px) {
  [data-theme="service"] .site-page .call-bar { display: flex; }
}

/* ----------------------------------------------------------------- 5. tech */
[data-theme="tech"] {
  --bg: #f8fafc; --card: #ffffff; --ink: #0f172a; --muted: #64748b;
  --line: #dbe3ec; --accent: #2563eb; --accent-soft: #e7effe;
  --radius: 8px;
  --font: system-ui, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --display: var(--font);
}
[data-theme="tech"] .site-page .hero {
  background: var(--ink); color: #f8fafc; padding: 4rem 1.2rem 3rem;
  border-bottom: 4px solid var(--accent);
}
[data-theme="tech"] .site-page .hero h1 { letter-spacing: -.015em; }
/* Alternating full-bleed bands instead of a single column. */
[data-theme="tech"] .site-page main.site { max-width: none; padding: 0; }
[data-theme="tech"] .site-page main.site section {
  padding: 2.4rem 1.2rem; max-width: 46rem; margin: 0 auto;
}
[data-theme="tech"] .site-page main.site section:nth-of-type(even) {
  background: #fff; max-width: none; border-block: 1px solid var(--line);
}
[data-theme="tech"] .site-page main.site section:nth-of-type(even) > * { max-width: 46rem; margin-inline: auto; }
[data-theme="tech"] .site-page .services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0;
}
[data-theme="tech"] .site-page .services li {
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: .7rem 0 .7rem 1rem;
}
[data-theme="tech"] .site-page .services li::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  background: var(--accent); margin-inline-end: .6rem;
}

/* ----------------------------------------------------------------- 6. warm */
[data-theme="warm"] {
  --bg: #faf6f0; --card: #fffdfa; --ink: #3b2a33; --muted: #8a7480;
  --line: #ead9dd; --accent: #4a2545; --accent-soft: #f6e9ec;
  --radius: 24px;
  --font: system-ui, "Arial Hebrew", Arial, sans-serif;
  --display: "Heebo", system-ui, sans-serif;
}
[data-theme="warm"] .site-page h1,
[data-theme="warm"] .site-page h2 { font-family: var(--display); font-weight: 700; }
[data-theme="warm"] .site-page .hero {
  background:
    radial-gradient(80% 60% at 20% 0%, #fff 0%, transparent 60%),
    linear-gradient(180deg, #f6e9ec 0%, #faf6f0 100%);
  color: var(--ink); padding: 4.5rem 1.2rem 3rem;
}
[data-theme="warm"] .site-page .hero h1 { font-size: 2.4rem; }
/* The accent, darkened by base.html until white reads on it: the raw rose is 3.8:1. */
[data-theme="warm"] .site-page .btn { background: var(--btn-text); color: #fff; }
[data-theme="warm"] .site-page .btn.ghost-btn {
  background: transparent; color: var(--accent); border-color: var(--accent);
}
[data-theme="warm"] .site-page .services li { background: var(--card); border-color: var(--line); }
[data-theme="warm"] .site-page details {
  /* A bracket-shaped side rule reads as a rendering fault against a 24px
     radius; the weight goes on the summary instead. */
  border-radius: 14px;
}
[data-theme="warm"] .site-page details summary { color: var(--accent); }

/* ----------------------------------------------------------------- 7. bold */
[data-theme="bold"] {
  --bg: #0b6e4f; --card: rgba(255, 255, 255, .1); --ink: #ffffff; --muted: #bfe3d5;
  --line: rgba(255, 255, 255, .22); --accent: #ffffff; --accent-soft: rgba(255, 255, 255, .16);
  --radius: 0px;
  --font: "Rubik", system-ui, "Arial Hebrew", sans-serif;
  --display: "Rubik", system-ui, sans-serif;
}
[data-theme="bold"] .site-page { background: var(--bg); }
[data-theme="bold"] .site-page .hero { background: none; padding: 4rem 1.2rem 2rem; }
[data-theme="bold"] .site-page .hero h1 {
  font-size: clamp(2.4rem, 9vw, 4.5rem); font-weight: 900; line-height: 1.02;
  letter-spacing: -.03em;
}
[data-theme="bold"] .site-page .btn { background: #fff; color: #0b6e4f; border-radius: 0; }
[data-theme="bold"] .site-page .btn.ghost-btn { background: transparent; color: #fff; }
/* Services as full-width rows of large text — the list IS the design. */
[data-theme="bold"] .site-page .services { display: block; }
[data-theme="bold"] .site-page .services li {
  background: none; border: 0; border-top: 2px solid var(--line); border-radius: 0;
  padding: .7rem 0; font-size: clamp(1.2rem, 4.5vw, 1.9rem); font-weight: 700;
}
[data-theme="bold"] .site-page .facts > div,
[data-theme="bold"] .site-page details,
[data-theme="bold"] .site-page .box { background: var(--card); border-color: var(--line); }
[data-theme="bold"] .site-page .box input,
[data-theme="bold"] .site-page .box textarea { background: #fff; color: #10241c; }

/* ------------------------------------------------- the picker's miniatures
 * Each card renders in its own theme's variables, so the owner is looking at the
 * real thing at 1/6 scale rather than reading adjectives. The card sets the
 * variables locally (not on :root), which is why the picker can show seven
 * different themes on one page.
 */
.theme-grid {
  /* Six to a row: the tiles are real pages now, so more of them fit and the
     comparison is the point. Steps down rather than squeezing — below about
     1500px a sixth tile is too narrow to read anything in. */
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: .9rem; margin-block: 1rem;
}
@media (max-width: 1500px) { .theme-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
.theme-card {
  display: block; cursor: pointer; border: 2px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--card);
}
.theme-card:focus-within, .theme-card:has(input:checked) { border-color: var(--accent); }
/* A 2px border recoloured among a dozen equally colourful miniatures was not a
 * signal anyone could find — an owner could not tell which design they had
 * chosen. The chosen card now lifts, keeps a ring in the accent, and says so in
 * words, because the border alone competes with the artwork it surrounds. */
.theme-card:has(input:checked) {
  position: relative; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 32%, transparent),
    0 6px 18px color-mix(in oklab, var(--ink) 14%, transparent);
  transform: translateY(-2px);
}
.theme-card:has(input:checked)::after {
  content: "✓ נבחר"; position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 999px; letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .theme-card:has(input:checked) { transform: none; } }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
/* The tile is the real page, not a drawing of it: the iframe lays out at
   --tp-page so the design composes as a DESKTOP page, and zoom scales the whole
   box down. Six to a row at full width. Each tile scrolls on its own, so a long
   design can be read without opening it.

   What stood here was a miniature built from the palette — a name, a description
   line, a button bar, three chips. It could not answer "which is which", because
   38 of the 54 designs share one template and differed only in colour. */
.theme-grid { --tp-page: 1280px; --tp-zoom: .175; --tp-h: 15rem; }
.theme-frame {
  display: block; position: relative; block-size: var(--tp-h); overflow: auto;
  background: #fff;
}
.theme-frame iframe {
  inline-size: var(--tp-page); block-size: calc(var(--tp-h) * 3 / var(--tp-zoom) / 3);
  min-block-size: 2400px; border: 0; zoom: var(--tp-zoom); display: block;
}
/* Takes the click the iframe would otherwise swallow. Not scrollable itself, so
   the wheel still reaches .theme-frame. */
.theme-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.theme-zoom {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 3;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .1rem .45rem; cursor: zoom-in;
  font-size: .95rem; line-height: 1.5; opacity: 0; transition: opacity .12s;
}
.theme-card:hover .theme-zoom, .theme-zoom:focus { opacity: 1; }
#theme-lb {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 14, 12, .82);
  display: none; padding: 3rem 1.4rem 1.4rem;
}
#theme-lb[open] { display: block; }
#theme-lb iframe {
  inline-size: 100%; block-size: 100%; border: 0; border-radius: 10px; background: #fff;
}
#theme-lb-close {
  position: absolute; inset-block-start: .6rem; inset-inline-end: 1.4rem; z-index: 61;
  background: #f4f3ef; border: 0; border-radius: var(--radius); padding: .35rem .9rem;
  cursor: pointer; font: 600 .85rem system-ui;
}
.theme-meta {
  display: block; padding: .7rem .9rem; border-top: 1px solid var(--line);
  background: #fff; color: #17212b;
}
.theme-meta strong { display: inline-block; margin-inline-end: .4rem; }
.theme-meta .muted { display: block; font-size: .8rem; color: #6b7785; }
.theme-form > button { margin-top: .6rem; }
.theme-form > a { margin-inline-start: .8rem; }

/* ------------------------------------------------- the three taste questions
 * Above the miniatures, and deliberately plainer than them: this is the step
 * that ASKS, and it must not compete for attention with the designs it orders.
 * Chips rather than a dropdown — an owner picks four times on a phone, and each
 * pick has to be one thumb-sized tap.
 */
.taste-form {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 1rem 1.1rem 1.1rem; margin-block: 1rem;
}
.taste-form h3 { margin: 0 0 .2rem; }
.taste-form > .muted { margin: 0 0 .8rem; font-size: .85rem; }
.taste-q { border: 0; padding: 0; margin: 0 0 .8rem; }
.taste-q legend { padding: 0; font-weight: 700; font-size: .9rem; margin-bottom: .4rem; }
.taste-opt {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .8rem;
  margin: 0 0 .35rem .35rem; font-size: .88rem; background: var(--bg);
}
.taste-opt:has(input:checked) {
  border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent);
  font-weight: 700;
}
.taste-opt input { accent-color: var(--accent); }

/* Individual mock overrides where a theme's identity lives in its structure. */
.theme-card[data-theme="service"] .theme-mock-btn { font-size: 1rem; }
.theme-card[data-theme="bold"] .theme-mock-hero b { font-size: 1.5rem; line-height: 1.05; }
.theme-card[data-theme="warm"] .theme-mock-btn { background: #c4677b; color: #fff; }
.theme-card[data-theme="futuristic"] .theme-mock {
  background: radial-gradient(100% 80% at 80% 0%, #2b1e66 0%, #171233 70%);
}
.theme-card[data-theme="dark"] .theme-mock-btn { color: #17120a; }
.theme-card[data-theme="tech"] .theme-mock-chips span { border-radius: 0; }

/* ------------------------------------------------------- shared structure */
.site-page { font-family: var(--font); background: var(--bg); color: var(--ink); }
.site-page h1, .site-page h2 { font-family: var(--display); }
.site-page .call-bar {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: var(--accent); color: #fff; padding: .8rem; justify-content: center;
  font-weight: 700; text-decoration: none;
}
/* Quality floor, every theme: keyboard focus stays visible and motion is optional. */
.site-page a:focus-visible, .site-page button:focus-visible, .site-page summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .site-page * { animation: none !important; transition: none !important; }
}