/* BTSA design tokens. The ONLY file allowed to hold colour values or font sizes (scripts/static_rules.mjs, S14).
   Seven learner looks (Settings page; data-look on <html>): three art themes (Folk, the default, Nocturne, Sumi) and
   Overprint, Classic, Margins, Afterglow, each light and dark (data-theme or the
   system setting). Source: Zoe's look "Overprint", chosen by Alexander 17.10.2026 (03_product/design/exam_rebels_look/
   handover_milo.md, values from app_tokens_overprint.css, 214 contrast pairs checked by build/app_tokens.py), on top of
   her brand core and maths look (derivation_format.md 4.7). Components use var(--...) only.
   Also served to the public pages (waiting list, contact, Legal, privacy) as /static/tokens.css by scripts/copy_public.mjs.
   Layers (brand core 8.1): core tokens, semantic tokens, theme overrides (light, dark). */
:root{
  /* ---- fonts: per look (THEMES below) ---- */
  /* Maths: Fira Math through MathJax 4.1.3 CHTML, rendered at build time (assets/mathjax/). Fixed in every theme. */
  --fs-maths:1.12em;           /* Zoe 4.6: maths about 1.12 em of the text around it */

  /* ---- type scale: 1rem = 19 px = 14 pt floor (Alexander's rule). Nothing goes below --fs-floor. Ratio 1.25. ---- */
  --fs-root:19px;
  --tz:1;                       /* A-/A+ multiplier, 1.0 to 1.6, never below 1 */
  --fs-html:calc(var(--fs-root) * var(--tz));
  --fs-floor:1rem;              /* captions, chips, labels, sources, footers */
  --fs-body:1rem;
  --fs-md:1.0625rem;
  --fs-lg:1.25rem;              /* hand-font labels, h4 */
  --fs-xl:1.5625rem;            /* h3, section numbers */
  /* --fs-h1, --fs-h2, --fs-hero are per look (THEMES below): Unbounded and friends are wide, Classic keeps its old sizes */
  --fs-chapnum:2rem;
  --fs-svg-label:15px;          /* SVG user units inside graphs, scaled with the drawing */
  --fs-svg-label-lg:19px;
  --lh-body:1.6;
  --lh-tight:1.2;

  /* ---- spacing (4 px grid) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --navh:56px;
  --target:44px;                /* minimum touch target */

  /* ---- radii: --r-page to --r-chip are per look (THEMES below) ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-round:50%;
  --r-blob:50% 44% 52% 46%;

  /* ---- lines ---- */
  --bw-thin:1.5px; --bw:2px; --bw-pipe:2.5px;   /* --bw-note, --bw-page and the --shadow-* tokens are per look */
}

/* ---- card roles (Zoe, handover_milo.md 17, Iris 009): a hue means one job in every look, light and dark. Aliases only,
   set once here and never per look; the looks set the seven hue tokens. Declared on swatches too, so a Settings swatch
   resolves them against its own look. ---- */
:root, [data-look-swatch]{
  --role-goal:var(--yellow); --role-why:var(--orange); --role-explore:var(--lilac); --role-check:var(--blue);
  --role-keep:var(--green); --role-watch:var(--pink); --role-pause:var(--mint); --role-write:var(--card); --role-fold:var(--paper2);
}

/* ---- fixed in every look ---- */
:root{
  --img-bg:#ffffff; --scrim:rgba(0,0,0,.45); --scrim-strong:rgba(0,0,0,.82);
  --stars:#c98a00; --yt-red:#e62117; --on-yt:#ffffff;
  --wordmark-h:40px;            /* Swirlwise mark and word height in the top bar (Zoe handover_milo.md 9c, wide letters) */
}
@media (max-width:460px){:root{--wordmark-h:34px}} /* 9c: 205 px wide at 34 px, fits the 320 px nav; the small cuts' floor (9d) */
/* ==== THEMES: four looks, each light and dark (Settings page, assets/theme.js). Generated once on 17.10.2026 from the
   sources named per look; test/themes_contrast.test.mjs checks every text and UI pair in all 8 combinations. ==== */
/* ---- Classic: the notebook look as before c57324c (brand core 4). primary is the yellow note (button with an ink border). ---- */
:root[data-look="classic"], [data-look-swatch="classic"]{
  --fs-h1:clamp(1.95rem,6vw,2.45rem); --fs-h2:clamp(1.75rem,4.5vw,1.95rem); --fs-hero:clamp(2rem,5.5vw,2.45rem);
  --font-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif; --font-display:'Kalam','Comic Neue','Segoe Print',cursive; --font-label:'Kalam','Comic Neue','Segoe Print',cursive;
  --fw-heavy:700; --fw-label:700; --paper-texture:radial-gradient(var(--dots) 1px,transparent 1px); --paper-texture-size:22px 22px;
  --r-page:18px 8px 20px 8px; --r-panel:16px 6px 16px 6px; --r-note:14px 5px 16px 5px; --r-card:14px 4px 14px 4px; --r-btn:12px 4px 12px 4px; --r-field:10px 3px 10px 3px; --r-chip:8px 3px 8px 3px;
  --bw-note:2.2px; --bw-page:2.4px;
  --shadow-page:5px 5px 0 var(--dots); --shadow-panel:4px 4px 0 var(--dots); --shadow-fig:3px 3px 0 var(--dots); --shadow-btn:none;
  --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1); --confetti-5:var(--accent); --confetti-6:var(--primary);
  --paper:#fbf8f1; --paper2:#f4efe3; --dots:#dcd4c2; --card:#ffffff; --ink:#26262e; --ink2:#55556a;
  --line:#2f2f3a; --yellow:#fff1a8; --blue:#d4eaff; --pink:#ffd6e0; --green:#d4f3d0; --orange:#ffe0bd;
  --lilac:#e6dcfb; --mint:#cff3ec; --accent:#d9473c; --accent2:#2f6fdb; --ok:#2e9e5b; --bad:#c83a3a;
  --accent-text:#a3322a; --link:#1f56b8; --ok-text:#1b6b3c; --bad-text:#a12a2a; --okbg:#d8f5dd; --badbg:#ffe0e0;
  --hl:#fffbe0; --pipe:#2e6cd4; --ans-hl:#fff6c8; --wbg:#f3f7ff; --primary:#fff1a8; --on-primary:#26262e;
  --art1:#ffcf33; --art2:#e2574c; --art3:#2e9e5b; --art4:#2f6fdb; --mark-front:#0a1450; color-scheme:light;
  /* Classic as before c57324c (Zoe review 17.10.2026): focus ring, two confetti colours */
  --focus:var(--accent-text); --confetti-5:#b46be0; --confetti-6:#ff8fb1;
  /* margin art (03_product/design/backgrounds, v6): page-level text and the art palette --g0 to --gp */
  --page-ink:var(--ink); --page-ink2:var(--ink2); --page-link:var(--link); --page-line:var(--line); --art-gap:38px;
  --art-card-border:var(--line); --g0:#e2574c; --g1:#4a7fd6; --g2:#f4b62a; --g3:#5aa83f; --g4:#f08a3c;
  --g5:#7cc6e8; --g6:#9a6bc4; --g7:#f08fb0; --gk:#26262e; --gd:#26262e; --gl:#fbf8f1; --gs1:#d4eaff; --gs2:#fff1d0;
  --gp:#fbf8f1;
}
@media (prefers-color-scheme: dark){
  :root[data-look="classic"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="classic"]{
    --paper:#1d1d23; --paper2:#26262e; --dots:#33333d; --card:#24242c; --ink:#ecebe6; --ink2:#c4c3cf;
    --line:#c9c8d2; --yellow:#4b4420; --blue:#1f3550; --pink:#4b2833; --green:#1f3d27; --orange:#4a3420;
    --lilac:#352c4d; --mint:#1d3f3a; --accent:#ff8a7a; --accent2:#7fb0ff; --ok:#6fd497; --bad:#ff8080;
    --accent-text:#ff9c8f; --link:#93bcff; --ok-text:#6fd497; --bad-text:#ff9a9a; --okbg:#1e3d29; --badbg:#4a2323;
    --hl:#3a3520; --pipe:#7fb0ff; --ans-hl:#3a3520; --wbg:#26324a; --primary:#4b4420; --on-primary:#ecebe6;
    --art1:#ffcf33; --art2:#e2574c; --art3:#2e9e5b; --art4:#2f6fdb; --mark-front:#f6efd9; color-scheme:dark;
      --g0:#ff7a6b; --g1:#6f9cf0; --g2:#ffc94a; --g3:#76c85a; --g4:#ffa05a; --g5:#8fd4f2; --g6:#b68ae0; --g7:#ff9fc0;
    --gk:#0b0b10; --gd:#0b0b10; --gl:#ecebe6; --gs1:#1f3550; --gs2:#33281c; --gp:#1d1d23;
}
}
:root[data-look="classic"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="classic"]{
    --paper:#1d1d23; --paper2:#26262e; --dots:#33333d; --card:#24242c; --ink:#ecebe6; --ink2:#c4c3cf;
    --line:#c9c8d2; --yellow:#4b4420; --blue:#1f3550; --pink:#4b2833; --green:#1f3d27; --orange:#4a3420;
    --lilac:#352c4d; --mint:#1d3f3a; --accent:#ff8a7a; --accent2:#7fb0ff; --ok:#6fd497; --bad:#ff8080;
    --accent-text:#ff9c8f; --link:#93bcff; --ok-text:#6fd497; --bad-text:#ff9a9a; --okbg:#1e3d29; --badbg:#4a2323;
    --hl:#3a3520; --pipe:#7fb0ff; --ans-hl:#3a3520; --wbg:#26324a; --primary:#4b4420; --on-primary:#ecebe6;
    --art1:#ffcf33; --art2:#e2574c; --art3:#2e9e5b; --art4:#2f6fdb; --mark-front:#f6efd9; color-scheme:dark;
    --g0:#ff7a6b; --g1:#6f9cf0; --g2:#ffc94a; --g3:#76c85a; --g4:#ffa05a; --g5:#8fd4f2; --g6:#b68ae0; --g7:#ff9fc0;
    --gk:#0b0b10; --gd:#0b0b10; --gl:#ecebe6; --gs1:#1f3550; --gs2:#33281c; --gp:#1d1d23;
}
/* ---- Overprint (default, Alexander 17.10.2026): Zoe app_tokens_overprint.css. ----
   --mark-front in every look is the Swirlwise word colour (Zoe handover_milo.md 3b/9c): navy #0a1450 on light paper,
   paper #f6efd9 on dark paper and on Nocturne in both modes. The app mark is a PNG on its own navy tile. */
:root, [data-look-swatch="overprint"]{
  --fs-h1:clamp(1.5rem,6vw,2.45rem); --fs-h2:clamp(1.4rem,4.5vw,1.95rem); --fs-hero:clamp(1.4rem,6.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-display:'Unbounded','Fira Sans',system-ui,sans-serif; --font-label:'Fira Sans',system-ui,sans-serif;
  --fw-heavy:900; --fw-label:700; --paper-texture:none; --paper-texture-size:auto;
  --r-page:6px; --r-panel:4px; --r-note:4px; --r-card:4px; --r-btn:4px; --r-field:4px; --r-chip:2px;
  --bw-note:2.5px; --bw-page:3px;
  --shadow-page:8px 8px 0 var(--art2); --shadow-panel:6px 6px 0 var(--art4); --shadow-fig:4px 4px 0 var(--art1); --shadow-btn:4px 4px 0 var(--art2);
  --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1); --confetti-5:var(--accent); --confetti-6:var(--primary);
  --paper:#fff7ea; --paper2:#fdebd2; --dots:#e9d6b8; --card:#ffffff; --ink:#1a1838; --ink2:#4d4a6d;
  --line:#1a1838; --yellow:#ffe79c; --blue:#e6f0ff; --pink:#ffe0ef; --green:#dcf5e8; --orange:#ffe3c4;
  --lilac:#ece4ff; --mint:#c9f3f7; --accent:#e0307f; --accent2:#1d3fbf; --ok:#1c8a52; --bad:#d0304a;
  --accent-text:#b0156a; --link:#0b56ad; --ok-text:#126a3d; --bad-text:#ad1f38; --okbg:#dcf5e8; --badbg:#ffe1e6;
  --hl:#fff0c2; --pipe:#c52a70; --ans-hl:#ffe79c; --wbg:#e6f0ff; --primary:#1d3fbf; --on-primary:#ffffff;
  --art1:#ffc21a; --art2:#ff6fb3; --art3:#3ccf8e; --art4:#5aa2ff; --mark-front:#0a1450; color-scheme:light;
  /* margin art (03_product/design/backgrounds, v6): page-level text and the art palette --g0 to --gp */
  --page-ink:var(--ink); --page-ink2:var(--ink2); --page-link:var(--link); --page-line:var(--line); --art-gap:38px;
  --art-card-border:var(--line); --g0:#ff4fa0; --g1:#2747d8; --g2:#ffc21a; --g3:#2fd08a; --g4:#ff7a2f;
  --g5:#5ad1ff; --g6:#8a5cff; --g7:#c4e93a; --gk:#1a1838; --gd:#1a1838; --gl:#fff7ea; --gs1:#bfe9ff; --gs2:#ffeccc;
  --gp:#fff7ea;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="overprint"]{
    --paper:#13122b; --paper2:#282547; --dots:#3a3762; --card:#1d1b3b; --ink:#fff4e6; --ink2:#d0cae6;
    --line:#d0cae6; --yellow:#4a3d10; --blue:#22305a; --pink:#4a1d3c; --green:#143f2e; --orange:#4a2f14;
    --lilac:#382859; --mint:#0f3f3f; --accent:#ff6fb3; --accent2:#86c4ff; --ok:#72e0a6; --bad:#ff93a2;
    --accent-text:#ff9ccf; --link:#8cc8ff; --ok-text:#72e0a6; --bad-text:#ff9dab; --okbg:#143f2e; --badbg:#4a1d2a;
    --hl:#3a3214; --pipe:#ff6fb3; --ans-hl:#4a3d10; --wbg:#22305a; --primary:#ffc21a; --on-primary:#13122b;
    --art1:#ffc21a; --art2:#ff5fae; --art3:#2fd08a; --art4:#4b8dff; --mark-front:#f6efd9; color-scheme:dark;
      --g0:#ff5fae; --g1:#4b6dff; --g2:#ffc21a; --g3:#2fd08a; --g4:#ff8a45; --g5:#3cc8ff; --g6:#9a70ff; --g7:#b6e03a;
    --gk:#07061a; --gd:#07061a; --gl:#fff4e6; --gs1:#22305a; --gs2:#2c2350; --gp:#13122b;
}
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="overprint"]{
    --paper:#13122b; --paper2:#282547; --dots:#3a3762; --card:#1d1b3b; --ink:#fff4e6; --ink2:#d0cae6;
    --line:#d0cae6; --yellow:#4a3d10; --blue:#22305a; --pink:#4a1d3c; --green:#143f2e; --orange:#4a2f14;
    --lilac:#382859; --mint:#0f3f3f; --accent:#ff6fb3; --accent2:#86c4ff; --ok:#72e0a6; --bad:#ff93a2;
    --accent-text:#ff9ccf; --link:#8cc8ff; --ok-text:#72e0a6; --bad-text:#ff9dab; --okbg:#143f2e; --badbg:#4a1d2a;
    --hl:#3a3214; --pipe:#ff6fb3; --ans-hl:#4a3d10; --wbg:#22305a; --primary:#ffc21a; --on-primary:#13122b;
    --art1:#ffc21a; --art2:#ff5fae; --art3:#2fd08a; --art4:#4b8dff; --mark-front:#f6efd9; color-scheme:dark;
    --g0:#ff5fae; --g1:#4b6dff; --g2:#ffc21a; --g3:#2fd08a; --g4:#ff8a45; --g5:#3cc8ff; --g6:#9a70ff; --g7:#b6e03a;
    --gk:#07061a; --gd:#07061a; --gl:#fff4e6; --gs1:#22305a; --gs2:#2c2350; --gp:#13122b;
}
/* ---- Margins: Zoe exam_rebels_tokens.css .tk-margins-*, mapped like her Overprint mapping: paper bg, card surface, paper2 surface2, ok/bad text from ok/bad, accent from accent-text, accent2 from pipe, ans-hl from hl, hl half way to card, notes from deco1-4 mixed toward card until every text token is 4.5:1 or better. ---- */
:root[data-look="margins"], [data-look-swatch="margins"]{
  --fs-h1:clamp(1.5rem,6vw,2.45rem); --fs-h2:clamp(1.4rem,4.5vw,1.95rem); --fs-hero:clamp(1.4rem,6.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-display:'Bricolage Grotesque','Fira Sans',system-ui,sans-serif; --font-label:'Kalam','Fira Sans',cursive;
  --fw-heavy:800; --fw-label:700; --paper-texture:none; --paper-texture-size:auto;
  --r-page:16px 6px 18px 6px; --r-panel:16px 6px 18px 6px; --r-note:12px 4px 14px 4px; --r-card:12px 4px 12px 4px; --r-btn:12px 4px 12px 4px; --r-field:10px 3px 10px 3px; --r-chip:10px 3px 12px 3px;
  --bw-note:2.2px; --bw-page:2.4px;
  --shadow-page:6px 6px 0 var(--primary); --shadow-panel:6px 6px 0 var(--art4); --shadow-fig:4px 4px 0 var(--art1); --shadow-btn:4px 4px 0 var(--art2);
  --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1); --confetti-5:var(--accent); --confetti-6:var(--primary);
  --paper:#fbf7ee; --paper2:#f4ecda; --dots:#d8d4d0; --card:#ffffff; --ink:#1d1b29; --ink2:#545066;
  --line:#3a3646; --yellow:#ffec8b; --blue:#e2eaff; --pink:#ffdcea; --green:#d3f5e8; --orange:#ffe4ba;
  --lilac:#ebe3ff; --mint:#cbebf0; --accent:#ad2914; --accent2:#2a52e0; --ok:#17673a; --bad:#a3221b;
  --accent-text:#ad2914; --link:#1f48c8; --ok-text:#17673a; --bad-text:#a3221b; --okbg:#d5e4dc; --badbg:#f2e0df;
  --hl:#fff8d0; --pipe:#2a52e0; --ans-hl:#fff0a0; --wbg:#eaf0ff; --primary:#c8321f; --on-primary:#ffffff;
  --art1:#ffd21f; --art2:#ff8fbf; --art3:#3fd6a4; --art4:#7d9cff; --mark-front:#0a1450; color-scheme:light;
  /* margin art (03_product/design/backgrounds, v6): page-level text and the art palette --g0 to --gp */
  --page-ink:var(--ink); --page-ink2:var(--ink2); --page-link:var(--link); --page-line:var(--line); --art-gap:38px;
  --art-card-border:var(--line); --g0:#e3361f; --g1:#4f6cff; --g2:#ffd21f; --g3:#3fd6a4; --g4:#ff8c1a;
  --g5:#22c3e6; --g6:#9b5de5; --g7:#ff7fb6; --gk:#1d1b29; --gd:#1d1b29; --gl:#fbf7ee; --gs1:#e2eaff; --gs2:#fff4c4;
  --gp:#fbf7ee;
}
@media (prefers-color-scheme: dark){
  :root[data-look="margins"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="margins"]{
    --paper:#16141d; --paper2:#2b2736; --dots:#302e39; --card:#211e2a; --ink:#f4f0e6; --ink2:#c9c3d6;
    --line:#a9a3b8; --yellow:#4a4018; --blue:#24335e; --pink:#552641; --green:#16443a; --orange:#583a28;
    --lilac:#3c2c50; --mint:#143333; --accent:#ff8f7d; --accent2:#86a6ff; --ok:#72dc9c; --bad:#ff978b;
    --accent-text:#ff8f7d; --link:#93b2ff; --ok-text:#72dc9c; --bad-text:#ff978b; --okbg:#314340; --badbg:#533940;
    --hl:#2f2a1f; --pipe:#86a6ff; --ans-hl:#3d3514; --wbg:#222b45; --primary:#ff6a55; --on-primary:#16141d;
    --art1:#ffd21f; --art2:#ff7fb6; --art3:#3fd6a4; --art4:#7d9cff; --mark-front:#f6efd9; color-scheme:dark;
      --g0:#ff5a40; --g1:#6f87ff; --g2:#ffd21f; --g3:#3fd6a4; --g4:#ff9a33; --g5:#36d0f0; --g6:#b07cff; --g7:#ff8fc0;
    --gk:#050409; --gd:#050409; --gl:#f4f0e6; --gs1:#24335e; --gs2:#3a2c22; --gp:#16141d;
}
}
:root[data-look="margins"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="margins"]{
    --paper:#16141d; --paper2:#2b2736; --dots:#302e39; --card:#211e2a; --ink:#f4f0e6; --ink2:#c9c3d6;
    --line:#a9a3b8; --yellow:#4a4018; --blue:#24335e; --pink:#552641; --green:#16443a; --orange:#583a28;
    --lilac:#3c2c50; --mint:#143333; --accent:#ff8f7d; --accent2:#86a6ff; --ok:#72dc9c; --bad:#ff978b;
    --accent-text:#ff8f7d; --link:#93b2ff; --ok-text:#72dc9c; --bad-text:#ff978b; --okbg:#314340; --badbg:#533940;
    --hl:#2f2a1f; --pipe:#86a6ff; --ans-hl:#3d3514; --wbg:#222b45; --primary:#ff6a55; --on-primary:#16141d;
    --art1:#ffd21f; --art2:#ff7fb6; --art3:#3fd6a4; --art4:#7d9cff; --mark-front:#f6efd9; color-scheme:dark;
    --g0:#ff5a40; --g1:#6f87ff; --g2:#ffd21f; --g3:#3fd6a4; --g4:#ff9a33; --g5:#36d0f0; --g6:#b07cff; --g7:#ff8fc0;
    --gk:#050409; --gd:#050409; --gl:#f4f0e6; --gs1:#24335e; --gs2:#3a2c22; --gp:#16141d;
}
/* ---- Afterglow: Zoe exam_rebels_tokens.css .tk-afterglow-*, same mapping rules as Margins. Dark glow shadows from her look page. ---- */
:root[data-look="afterglow"], [data-look-swatch="afterglow"]{
  --fs-h1:clamp(1.5rem,6vw,2.45rem); --fs-h2:clamp(1.4rem,4.5vw,1.95rem); --fs-hero:clamp(1.4rem,6.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-display:'Space Grotesk','Fira Sans',system-ui,sans-serif; --font-label:'Fira Code',ui-monospace,monospace;
  --fw-heavy:700; --fw-label:500; --paper-texture:none; --paper-texture-size:auto;
  --r-page:16px; --r-panel:14px; --r-note:12px; --r-card:12px; --r-btn:999px; --r-field:10px; --r-chip:8px;
  --bw-note:1.5px; --bw-page:1.5px;
  --shadow-page:0 0 0 1px var(--paper2),0 0 36px -8px var(--primary); --shadow-panel:0 0 0 1px var(--paper2),0 0 28px -10px var(--primary); --shadow-fig:0 0 0 1px var(--paper2); --shadow-btn:none;
  --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1); --confetti-5:var(--accent); --confetti-6:var(--primary);
  --paper:#f5f3ff; --paper2:#ebe6fc; --dots:#d4d1e2; --card:#ffffff; --ink:#14102a; --ink2:#4b4666;
  --line:#3b3560; --yellow:#f0ffc2; --blue:#e3f0ff; --pink:#ffe3f5; --green:#ddf8e6; --orange:#ffe8d1;
  --lilac:#e3dbfb; --mint:#d0f4f5; --accent:#a0107c; --accent2:#5b2ee6; --ok:#0d6a44; --bad:#ad1730;
  --accent-text:#a0107c; --link:#4a22d8; --ok-text:#0d6a44; --bad-text:#ad1730; --okbg:#d3e4dd; --badbg:#f4dfe2;
  --hl:#f4ffd8; --pipe:#5b2ee6; --ans-hl:#e9ffb0; --wbg:#eee9ff; --primary:#5b2ee6; --on-primary:#ffffff;
  --art1:#b8f52a; --art2:#2bd4f5; --art3:#ff5cd6; --art4:#7b5cff; --mark-front:#0a1450; color-scheme:light;
  /* margin art (03_product/design/backgrounds, v6): page-level text and the art palette --g0 to --gp */
  --page-ink:var(--ink); --page-ink2:var(--ink2); --page-link:var(--link); --page-line:var(--line); --art-gap:38px;
  --art-card-border:var(--line); --g0:#ff5cd6; --g1:#7b5cff; --g2:#b8f52a; --g3:#2bd4f5; --g4:#ff9f43;
  --g5:#00e0b0; --g6:#ff6b9d; --g7:#ffe14d; --gk:#14102a; --gd:#14102a; --gl:#f5f3ff; --gs1:#e3e0ff; --gs2:#f4ffd8;
  --gp:#f5f3ff;
}
@media (prefers-color-scheme: dark){
  :root[data-look="afterglow"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="afterglow"]{
    --paper:#0e0a1c; --paper2:#211a40; --dots:#252038; --card:#171230; --ink:#f2eeff; --ink2:#c3bbe3;
    --line:#8f86b8; --yellow:#2b3a0b; --blue:#1a2b51; --pink:#3f1239; --green:#123a26; --orange:#3d2510;
    --lilac:#2a2160; --mint:#0b3542; --accent:#ff7ee0; --accent2:#c6ff3d; --ok:#7cf0a8; --bad:#ff8a9c;
    --accent-text:#ff7ee0; --link:#8ce9ff; --ok-text:#7cf0a8; --bad-text:#ff8a9c; --okbg:#2c4149; --badbg:#58344e;
    --hl:#21261e; --pipe:#c6ff3d; --ans-hl:#2b3a0b; --wbg:#1d1945; --primary:#c6ff3d; --on-primary:#0e0a1c;
    --art1:#c6ff3d; --art2:#3de1ff; --art3:#ff4fd8; --art4:#8a6bff; --mark-front:#f6efd9; color-scheme:dark;
      --g0:#ff4fd8; --g1:#8a6bff; --g2:#c6ff3d; --g3:#3de1ff; --g4:#ffa64d; --g5:#19f0c0; --g6:#ff6ba8; --g7:#ffe14d;
    --gk:#000000; --gd:#05030d; --gl:#f2eeff; --gs1:#1d1945; --gs2:#2a1a40; --gp:#0e0a1c;
}
}
:root[data-look="afterglow"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="afterglow"]{
    --paper:#0e0a1c; --paper2:#211a40; --dots:#252038; --card:#171230; --ink:#f2eeff; --ink2:#c3bbe3;
    --line:#8f86b8; --yellow:#2b3a0b; --blue:#1a2b51; --pink:#3f1239; --green:#123a26; --orange:#3d2510;
    --lilac:#2a2160; --mint:#0b3542; --accent:#ff7ee0; --accent2:#c6ff3d; --ok:#7cf0a8; --bad:#ff8a9c;
    --accent-text:#ff7ee0; --link:#8ce9ff; --ok-text:#7cf0a8; --bad-text:#ff8a9c; --okbg:#2c4149; --badbg:#58344e;
    --hl:#21261e; --pipe:#c6ff3d; --ans-hl:#2b3a0b; --wbg:#1d1945; --primary:#c6ff3d; --on-primary:#0e0a1c;
    --art1:#c6ff3d; --art2:#3de1ff; --art3:#ff4fd8; --art4:#8a6bff; --mark-front:#f6efd9; color-scheme:dark;
    --g0:#ff4fd8; --g1:#8a6bff; --g2:#c6ff3d; --g3:#3de1ff; --g4:#ffa64d; --g5:#19f0c0; --g6:#ff6ba8; --g7:#ffe14d;
    --gk:#000000; --gd:#05030d; --gl:#f2eeff; --gs1:#1d1945; --gs2:#2a1a40; --gp:#0e0a1c;
}
/* ==== ART THEMES (Zoe, backgrounds hand-over 12.5 and 13; Alexander 17.10.2026: keep all seven looks, Folk is the default) ==== */
/* ---- Folk (art theme, the default since 17.10.2026): patterned bands, Spiral town, cut-outs. Page and reading colours from Zoe's specimen v6; sticky notes from Overprint. ---- */
:root[data-look="folk"], [data-look-swatch="folk"]{
  --fs-h1:clamp(1.5rem,6vw,2.45rem); --fs-h2:clamp(1.4rem,4.5vw,1.95rem); --fs-hero:clamp(1.4rem,6.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Unbounded','Fira Sans',system-ui,sans-serif; --font-label:'Fira Sans',system-ui,sans-serif;
  --fw-heavy:900; --fw-label:700; --paper-texture:none; --paper-texture-size:auto; --r-page:12px; --r-panel:12px;
  --r-note:10px; --r-card:10px; --r-btn:12px; --r-field:8px; --r-chip:8px; --bw-note:2px; --bw-page:1.5px;
  --shadow-page:6px 6px 0 var(--art2); --shadow-panel:4px 4px 0 var(--art4); --shadow-fig:3px 3px 0 var(--art1);
  --shadow-btn:none; --art-gap:84px; --art-card-border:transparent; --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1);
  --confetti-5:var(--accent); --confetti-6:var(--primary); --paper:#fff1d6; --paper2:#fff3dc; --dots:#ecd3a8;
  --card:#fffdf6; --ink:#1b1630; --ink2:#4f476b; --line:#1b1630; --yellow:#ffe79c; --blue:#e6f0ff; --pink:#ffe0ef;
  --green:#dcf5e8; --orange:#ffe3c4; --lilac:#ece4ff; --mint:#c9f3f7; --accent:#e4007c; --accent2:#0047ab; --ok:#1c8a52;
  --bad:#d0304a; --accent-text:#a8005c; --link:#0b4fb3; --ok-text:#126a3d; --bad-text:#ad1f38; --okbg:#dcf5e8;
  --badbg:#ffe1e6; --hl:#fff0c2; --pipe:#cf0071; --ans-hl:#ffe79c; --wbg:#e6f0ff; --primary:#0047ab;
  --on-primary:#ffffff; --art1:#ffb000; --art2:#e4007c; --art3:#00a86b; --art4:#0047ab;
  --mark-front:#0a1450; --page-ink:#1b1630;
  --page-ink2:#4f476b; --page-link:#0b4fb3; --page-line:#1b1630; color-scheme:light; --g0:#e4007c;
  --g1:#0047ab; --g2:#ffb000; --g3:#00a86b; --g4:#d7263d; --g5:#1fb5ad; --g6:#ff5fa2; --g7:#9ccc3c; --gk:#1b1630;
  --gd:#1b1630; --gl:#fffdf6; --gs1:#ffd9a8; --gs2:#fff0d6; --gp:#fffdf6;
}
@media (prefers-color-scheme: dark){
  :root[data-look="folk"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="folk"]{
    --paper:#17122a; --paper2:#2a2247; --dots:#3a3360; --card:#221b3a; --ink:#fff4e6; --ink2:#d6cdea; --line:#d6cdea;
    --yellow:#4a3d10; --blue:#22305a; --pink:#4a1d3c; --green:#143f2e; --orange:#4a2f14; --lilac:#382859;
    --mint:#0f3f3f; --accent:#ff5fa2; --accent2:#86c4ff; --ok:#72e0a6; --bad:#ff93a2; --accent-text:#ff9ccf;
    --link:#8cc8ff; --ok-text:#72e0a6; --bad-text:#ff9dab; --okbg:#143f2e; --badbg:#4a1d2a; --hl:#3a2f14;
    --pipe:#ff5fa2; --ans-hl:#4a3d10; --wbg:#22305a; --primary:#ffb000; --on-primary:#17122a; --art1:#ffb000;
    --art2:#ff5fa2; --art3:#2fd08a; --art4:#4b8dff; --mark-front:#f6efd9; --page-ink:#fff4e6; --page-ink2:#d6cdea; --page-link:#8cc8ff;
    --page-line:#d6cdea; color-scheme:dark; --g0:#e4007c; --g1:#0047ab; --g2:#ffb000;
    --g3:#00a86b; --g4:#d7263d; --g5:#1fb5ad; --g6:#ff5fa2; --g7:#9ccc3c; --gk:#07061a; --gd:#07061a; --gl:#fff4e6;
    --gs1:#3a1f2e; --gs2:#2a1d33; --gp:#221b3a;
  }
}
:root[data-look="folk"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="folk"]{
    --paper:#17122a; --paper2:#2a2247; --dots:#3a3360; --card:#221b3a; --ink:#fff4e6; --ink2:#d6cdea; --line:#d6cdea;
    --yellow:#4a3d10; --blue:#22305a; --pink:#4a1d3c; --green:#143f2e; --orange:#4a2f14; --lilac:#382859;
    --mint:#0f3f3f; --accent:#ff5fa2; --accent2:#86c4ff; --ok:#72e0a6; --bad:#ff93a2; --accent-text:#ff9ccf;
    --link:#8cc8ff; --ok-text:#72e0a6; --bad-text:#ff9dab; --okbg:#143f2e; --badbg:#4a1d2a; --hl:#3a2f14;
    --pipe:#ff5fa2; --ans-hl:#4a3d10; --wbg:#22305a; --primary:#ffb000; --on-primary:#17122a; --art1:#ffb000;
    --art2:#ff5fa2; --art3:#2fd08a; --art4:#4b8dff; --mark-front:#f6efd9; --page-ink:#fff4e6; --page-ink2:#d6cdea; --page-link:#8cc8ff;
    --page-line:#d6cdea; color-scheme:dark; --g0:#e4007c; --g1:#0047ab; --g2:#ffb000;
    --g3:#00a86b; --g4:#d7263d; --g5:#1fb5ad; --g6:#ff5fa2; --g7:#9ccc3c; --gk:#07061a; --gd:#07061a; --gl:#fff4e6;
    --gs1:#3a1f2e; --gs2:#2a1d33; --gp:#221b3a;
}
/* ---- Nocturne (art theme; Starry v2 colours 17.10.2026, light accent #c8700a is the AA shade of #e8890c): night page in both modes, lamplit paper cards in light mode. Text that sits on the page itself uses --page-ink, --page-ink2, --page-link. ---- */
:root[data-look="nocturne"], [data-look-swatch="nocturne"]{
  --fs-h1:clamp(1.95rem,6vw,2.45rem); --fs-h2:clamp(1.75rem,4.5vw,1.95rem); --fs-hero:clamp(2rem,5.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-display:'Kalam','Fira Sans',cursive;
  --font-label:'Fira Sans',system-ui,sans-serif; --fw-heavy:700; --fw-label:700; --paper-texture:none;
  --paper-texture-size:auto; --r-page:18px; --r-panel:16px; --r-note:12px; --r-card:12px; --r-btn:999px; --r-field:10px;
  --r-chip:8px; --bw-note:1.5px; --bw-page:1.5px; --shadow-page:0 0 0 1px var(--paper2),0 0 34px -8px var(--art1);
  --shadow-panel:0 0 0 1px var(--paper2),0 0 26px -10px var(--art1); --shadow-fig:0 0 0 1px var(--paper2);
  --shadow-btn:none; --art-gap:72px; --art-card-border:transparent; --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1);
  --confetti-5:var(--accent); --confetti-6:var(--primary); --paper:#0a1552; --paper2:#f3e6c0; --dots:#e3d2a2;
  --card:#fbf3dc; --ink:#1d1a2e; --ink2:#4a4560; --line:#6b4a12; --yellow:#fbe9b0; --blue:#dfe6f7; --pink:#f6dfea;
  --green:#dcefdc; --orange:#fbe1c2; --lilac:#dfd7f2; --mint:#d5efef; --accent:#c8700a; --accent2:#1c3fc4; --ok:#2e7d4f;
  --bad:#b3261e; --accent-text:#8a4b10; --link:#1f3fa0; --ok-text:#1b6b3c; --bad-text:#a12a2a; --okbg:#dcefdc;
  --badbg:#f6dfea; --hl:#fff0b8; --pipe:#1c3fc4; --ans-hl:#fbe9b0; --wbg:#e4ebf8; --primary:#1c3fc4;
  --on-primary:#ffffff; --art1:#ffc400; --art2:#1e9db4; --art3:#e8890c; --art4:#1c3fc4;
  --mark-front:#f6efd9; --page-ink:#f6efd9;
  --page-ink2:#cfd6f0; --page-link:#a9c8ff; --page-line:#ffc400; color-scheme:light; --g0:#ffc400;
  --g1:#1c3fc4; --g2:#ffe03a; --g3:#1e9db4; --g4:#e8890c; --g5:#7ad6d2; --g6:#5a26a0; --g7:#a065c4; --gk:#0a1450;
  --gd:#08134f; --gl:#fff6c2; --gs1:#1c3fc4; --gs2:#0c1d66; --gp:#fbf3dc;
}
@media (prefers-color-scheme: dark){
  :root[data-look="nocturne"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="nocturne"]{
    --paper:#0a1552; --paper2:#24306a; --dots:#2a3770; --card:#1b2552; --ink:#f6efd9; --ink2:#cfd0e6; --line:#ffc400;
    --yellow:#3d3416; --blue:#2a3860; --pink:#44233c; --green:#173d30; --orange:#46301a; --lilac:#35255a;
    --mint:#163d40; --accent:#ffc400; --accent2:#a9c8ff; --ok:#8fe0ae; --bad:#ffa3ae; --accent-text:#ffd76a;
    --link:#a9c8ff; --ok-text:#8fe0ae; --bad-text:#ffa3ae; --okbg:#173d30; --badbg:#44233c; --hl:#3a3214;
    --pipe:#ffc400; --ans-hl:#3d3416; --wbg:#22305a; --primary:#ffc400; --on-primary:#0a1552; --art1:#ffc400;
    --art2:#1e9db4; --art3:#e8890c; --art4:#7d9bea; --mark-front:#f6efd9; --page-ink:#f6efd9; --page-ink2:#cfd6f0; --page-link:#a9c8ff;
    --page-line:#ffc400; color-scheme:dark; --g0:#ffc400; --g1:#1c3fc4; --g2:#ffe03a;
    --g3:#1e9db4; --g4:#e8890c; --g5:#7ad6d2; --g6:#5a26a0; --g7:#a065c4; --gk:#0a1450; --gd:#08134f; --gl:#fff6c2;
    --gs1:#1c3fc4; --gs2:#0c1d66; --gp:#1b2552;
  }
}
:root[data-look="nocturne"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="nocturne"]{
    --paper:#0a1552; --paper2:#24306a; --dots:#2a3770; --card:#1b2552; --ink:#f6efd9; --ink2:#cfd0e6; --line:#ffc400;
    --yellow:#3d3416; --blue:#2a3860; --pink:#44233c; --green:#173d30; --orange:#46301a; --lilac:#35255a;
    --mint:#163d40; --accent:#ffc400; --accent2:#a9c8ff; --ok:#8fe0ae; --bad:#ffa3ae; --accent-text:#ffd76a;
    --link:#a9c8ff; --ok-text:#8fe0ae; --bad-text:#ffa3ae; --okbg:#173d30; --badbg:#44233c; --hl:#3a3214;
    --pipe:#ffc400; --ans-hl:#3d3416; --wbg:#22305a; --primary:#ffc400; --on-primary:#0a1552; --art1:#ffc400;
    --art2:#1e9db4; --art3:#e8890c; --art4:#7d9bea; --mark-front:#f6efd9; --page-ink:#f6efd9; --page-ink2:#cfd6f0; --page-link:#a9c8ff;
    --page-line:#ffc400; color-scheme:dark; --g0:#ffc400; --g1:#1c3fc4; --g2:#ffe03a;
    --g3:#1e9db4; --g4:#e8890c; --g5:#7ad6d2; --g6:#5a26a0; --g7:#a065c4; --gk:#0a1450; --gd:#08134f; --gl:#fff6c2;
    --gs1:#1c3fc4; --gs2:#0c1d66; --gp:#1b2552;
}
/* ---- Sumi (art theme): rice paper and ink, square corners, seal red. Sticky notes are washi tints of the same hue families. ---- */
:root[data-look="sumi"], [data-look-swatch="sumi"]{
  --fs-h1:clamp(1.5rem,6vw,2.45rem); --fs-h2:clamp(1.4rem,4.5vw,1.95rem); --fs-hero:clamp(1.4rem,6.5vw,2.45rem);
  --font-body:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Bricolage Grotesque','Fira Sans',system-ui,sans-serif; --font-label:'Fira Sans',system-ui,sans-serif;
  --fw-heavy:800; --fw-label:700; --paper-texture:none; --paper-texture-size:auto; --r-page:0px; --r-panel:0px;
  --r-note:2px; --r-card:2px; --r-btn:2px; --r-field:2px; --r-chip:2px; --bw-note:1.5px; --bw-page:1.5px;
  --shadow-page:3px 4px 0 var(--dots); --shadow-panel:3px 3px 0 var(--dots); --shadow-fig:2px 2px 0 var(--dots);
  --shadow-btn:none; --art-gap:72px; --art-card-border:transparent; --font-hand:var(--font-display); --focus:var(--link);
  --confetti-1:var(--art2); --confetti-2:var(--art4); --confetti-3:var(--art3); --confetti-4:var(--art1);
  --confetti-5:var(--accent); --confetti-6:var(--primary); --paper:#ede6d8; --paper2:#f1eadb; --dots:#d6cdbb;
  --card:#fbf8f1; --ink:#17161d; --ink2:#4b4856; --line:#17161d; --yellow:#f6ecc4; --blue:#e3e8f1; --pink:#f5dfe8;
  --green:#dcebd9; --orange:#f3e2cc; --lilac:#dad6eb; --mint:#d7eced; --accent:#b3261e; --accent2:#2b3a67; --ok:#2e7d4f;
  --bad:#b3261e; --accent-text:#a3221b; --link:#1f4fa8; --ok-text:#17673a; --bad-text:#a3221b; --okbg:#dcebd9;
  --badbg:#f5dfe8; --hl:#f4ead2; --pipe:#b3261e; --ans-hl:#f6ecc4; --wbg:#e3e8f1; --primary:#b3261e;
  --on-primary:#ffffff; --art1:#c9a227; --art2:#b3261e; --art3:#3f6e5a; --art4:#2b3a67;
  --mark-front:#0a1450; --page-ink:#17161d;
  --page-ink2:#4b4856; --page-link:#1f4fa8; --page-line:#17161d; color-scheme:light; --g0:#b3261e;
  --g1:#2b3a67; --g2:#c9a227; --g3:#3f6e5a; --g4:#8c4a2f; --g5:#6b7fa3; --g6:#5a4a78; --g7:#a8b07a; --gk:#111018;
  --gd:#121119; --gl:#f4efe4; --gs1:#d9d2c3; --gs2:#ece5d6; --gp:#fbf8f1;
}
@media (prefers-color-scheme: dark){
  :root[data-look="sumi"]:not([data-theme="light"]), :root:not([data-theme="light"]) [data-look-swatch="sumi"]{
    --paper:#0d0c12; --paper2:#24222d; --dots:#2e2b38; --card:#1a1922; --ink:#f2ede2; --ink2:#c9c3b5; --line:#c9c3b5;
    --yellow:#3d3518; --blue:#1f2840; --pink:#3f2233; --green:#1c3324; --orange:#3b2a1a; --lilac:#302640;
    --mint:#173333; --accent:#e0574c; --accent2:#8da2d8; --ok:#72dc9c; --bad:#ff978b; --accent-text:#ff8f7d;
    --link:#8db4ff; --ok-text:#72dc9c; --bad-text:#ff978b; --okbg:#1c3324; --badbg:#3f2233; --hl:#2a2618;
    --pipe:#e46d63; --ans-hl:#3d3518; --wbg:#1f2840; --primary:#e0574c; --on-primary:#0d0c12; --art1:#c9a227;
    --art2:#e0574c; --art3:#5fa384; --art4:#6b7fa3; --mark-front:#f6efd9; --page-ink:#f2ede2; --page-ink2:#c9c3b5; --page-link:#8db4ff;
    --page-line:#c9c3b5; color-scheme:dark; --g0:#b3261e; --g1:#2b3a67; --g2:#c9a227;
    --g3:#3f6e5a; --g4:#8c4a2f; --g5:#6b7fa3; --g6:#5a4a78; --g7:#a8b07a; --gk:#111018; --gd:#08070c; --gl:#f4efe4;
    --gs1:#24222d; --gs2:#1a1922; --gp:#1a1922;
  }
}
:root[data-look="sumi"][data-theme="dark"], :root[data-theme="dark"] [data-look-swatch="sumi"]{
    --paper:#0d0c12; --paper2:#24222d; --dots:#2e2b38; --card:#1a1922; --ink:#f2ede2; --ink2:#c9c3b5; --line:#c9c3b5;
    --yellow:#3d3518; --blue:#1f2840; --pink:#3f2233; --green:#1c3324; --orange:#3b2a1a; --lilac:#302640;
    --mint:#173333; --accent:#e0574c; --accent2:#8da2d8; --ok:#72dc9c; --bad:#ff978b; --accent-text:#ff8f7d;
    --link:#8db4ff; --ok-text:#72dc9c; --bad-text:#ff978b; --okbg:#1c3324; --badbg:#3f2233; --hl:#2a2618;
    --pipe:#e46d63; --ans-hl:#3d3518; --wbg:#1f2840; --primary:#e0574c; --on-primary:#0d0c12; --art1:#c9a227;
    --art2:#e0574c; --art3:#5fa384; --art4:#6b7fa3; --mark-front:#f6efd9; --page-ink:#f2ede2; --page-ink2:#c9c3b5; --page-link:#8db4ff;
    --page-line:#c9c3b5; color-scheme:dark; --g0:#b3261e; --g1:#2b3a67; --g2:#c9a227;
    --g3:#3f6e5a; --g4:#8c4a2f; --g5:#6b7fa3; --g6:#5a4a78; --g7:#a8b07a; --gk:#111018; --gd:#08070c; --gl:#f4efe4;
    --gs1:#24222d; --gs2:#1a1922; --gp:#1a1922;
}
/* ==== END THEMES ==== */

/* ==== MARGIN ART: fixed colours and palette choices (03_product/design/backgrounds/src/er-bg.css, Zoe 17.10.2026) ====
   Art colours go beyond the reading tokens on purpose (art first) and are never used for text. */
:root{
  /* Starry and Nocturne: night colours in our own values, v2 (Alexander 17.10.2026: more intense,
     darker blue, stronger yellow; handover 14.5). Fixed in every look: always a night. A palette may override them. */
  --vA:#1e9db4; --vA2:#7ad6d2; --vB:#1c3fc4; --vB2:#0c228a; --vN:#08134f; --vY:#ffc400; --vY2:#ffe03a; --vW:#fff6c2;
  --vR:#1538c0; --vR2:#0a2391; --vO:#e8890c; --vG:#7c7a14; --vM:#a065c4; --vM2:#6a3a9c; --vT:#1a43b0; --vP:#5a26a0;
  --vC:#0c2a22; --vC2:#1a4634;
  /* Spiral town domes: metallic gold gradient stops */
  --hg-a:#8a5a12; --hg-b:#ffe27a; --hg-c:#f0b429;
  /* open ground between cards on phones and tablets (v6: the gaps are where the art lives) */
  --art-gap-narrow:88px;
}
/* ==== ART PALETTES: generated, see the GENERATED block at the end of this file ==== */

/* ==== MATHS ART STUDIO palettes (03_product/design/maths_art_studio, Zoe 17.10.2026). The studio has its own palette
   (data-mas-pal on .mas), separate from the learner's look; studio.js reads the --mas-c*, --mas-wash* and
   --mas-art-* values from here to draw and to export, so a new palette is one more block. ==== */
[data-mas-pal="folk"]{
  --mas-paper:#fff7e8; --mas-ink:#1b1630; --mas-muted:#574c66; --mas-accent:#0047ab; --mas-accent2:#e4007c;
  --mas-soft:#ffe7c2; --mas-soft2:#ffd9e6; --mas-line:#1b163033; --mas-head:'Unbounded','Fira Sans',sans-serif; --mas-headw:700;
  --mas-art-accent:#e4007c; --mas-star:#fffbe6; --mas-style:folk;
  --mas-wash1:#ffd9a8; --mas-wash2:#ffc9dc; --mas-wash3:#cfe9e0;
  --mas-c1:#e4007c; --mas-c2:#0047ab; --mas-c3:#ffb000; --mas-c4:#00a86b; --mas-c5:#d7263d; --mas-c6:#1fb5ad; --mas-c7:#ff5fa2; --mas-c8:#9ccc3c;
  --mas-dot:conic-gradient(#e4007c 0 25%,#ffb000 0 50%,#00a86b 0 75%,#0047ab 0); color-scheme:light;
}
[data-mas-pal="nocturne"]{
  --mas-paper:#0a1552; --mas-ink:#f6efd9; --mas-muted:#cfc8e6; --mas-accent:#ffc400; --mas-accent2:#7ad6d2;
  --mas-soft:#13246a; --mas-soft2:#1a3080; --mas-line:#f6efd933; --mas-head:'Kalam','Fira Sans',cursive; --mas-headw:700;
  --mas-art-accent:#ffc400; --mas-star:#fff6c2; --mas-style:glow;
  --mas-wash1:#0c1d66; --mas-wash2:#12287e; --mas-wash3:#1c3fc4;
  --mas-c1:#ffc400; --mas-c2:#ffe03a; --mas-c3:#1e9db4; --mas-c4:#7ad6d2; --mas-c5:#4f74ff; --mas-c6:#b48ae0; --mas-c7:#e8890c; --mas-c8:#fff6c2;
  --mas-dot:radial-gradient(circle at 35% 35%,#ffc400 0 22%,#1c3fc4 24% 60%,#0a1552 62%); color-scheme:dark;
}
[data-mas-pal="sumi"]{
  --mas-paper:#f5f0e5; --mas-ink:#111018; --mas-muted:#4b4853; --mas-accent:#b3261e; --mas-accent2:#2b3a67;
  --mas-soft:#ebe4d5; --mas-soft2:#e3dccb; --mas-line:#11101833; --mas-head:'Bricolage Grotesque','Fira Sans',sans-serif; --mas-headw:800;
  --mas-art-accent:#b3261e; --mas-star:#fffbe6; --mas-style:brush;
  --mas-wash1:#e4dccb; --mas-wash2:#ebe4d5; --mas-wash3:#dcd3c0;
  --mas-c1:#111018; --mas-c2:#2b3a67; --mas-c3:#3f6e5a; --mas-c4:#111018; --mas-c5:#5a4a78; --mas-c6:#8c4a2f; --mas-c7:#111018; --mas-c8:#6b7fa3;
  --mas-dot:radial-gradient(circle at 60% 60%,#b3261e 0 20%,#f5f0e5 22% 40%,#111018 42%); color-scheme:light;
}


/* ---- Sketch Deck palette (code-drawn sketches); tints point at the sticky-note tokens ---- */
.skt{--ink-2:var(--ink2);--ink-3:var(--ink2);--shade:var(--dots);
  --yellow-t:var(--yellow);--coral-t:var(--pink);--teal-t:var(--mint);--sky-t:var(--blue);--leaf-t:var(--green);--violet-t:var(--lilac);--stone-t:var(--paper2);
  --rose-t:var(--pink);--orange-t:var(--orange);--indigo-t:var(--lilac);--olive-t:var(--green);--cocoa-t:var(--orange);--crimson-t:var(--pink);
  --acc:var(--accent);--ball:var(--accent);
  --coral:#F2704F;--teal:#1FA293;--sky:#3F8FD6;--leaf:#6BB24B;--violet:#8C6BD1;--stone:#8B8577;
  --rose:#E0559B;--indigo:#3F4BB0;--olive:#8C9A2B;--cocoa:#8E5F3C;--crimson:#B82735}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .skt{
  --coral:#F07C5F;--teal:#3BC0B0;--sky:#6BAEEA;--leaf:#88C96A;--violet:#AF95E6;--stone:#A8A294;
  --rose:#F07AB4;--indigo:#8D97E8;--olive:#B3C24E;--cocoa:#C49371;--crimson:#E05A66}}
:root[data-theme="dark"] .skt{
  --coral:#F07C5F;--teal:#3BC0B0;--sky:#6BAEEA;--leaf:#88C96A;--violet:#AF95E6;--stone:#A8A294;
  --rose:#F07AB4;--indigo:#8D97E8;--olive:#B3C24E;--cocoa:#C49371;--crimson:#E05A66}
/* No hue token (--yellow, --orange, --lilac, --blue, --green, --pink, --mint) and no --role-* token is overridden here or
   by an art palette (data-art-palette, --g0 to --g7): those names carry the card roles in every look (Zoe 17.1), and
   the *-t tints above point at them, so icons that ask for solid yellow or orange get the tint. */

/* ==== GENERATED ART PALETTES (scripts/gen_palettes.mjs from pipeline/site/palettes.json; do not edit by hand) ==== */
/* Starry night (btsa_own) */
[data-art-palette="starry"], [data-art-palette="vangogh"]{--g0:#ffc400; --g1:#1c3fc4; --g2:#e8890c; --g3:#1e9db4; --g4:#0c228a; --g5:#6a3a9c; --g6:#7ad6d2; --g7:#7c7a14; --gs1:#c4d2ff; --gs2:#fff0b8; --gk:#0a1450; --gd:#08134f; --vN:#08134f; --vB:#1c3fc4; --vB2:#0c228a; --vA:#1e9db4; --vA2:#7ad6d2; --vY:#ffc400; --vY2:#ffe03a; --vW:#fff6c2; --vR:#1538c0; --vR2:#0a2391; --vO:#e8890c; --vG:#7c7a14; --vM:#a065c4; --vM2:#6a3a9c; --vT:#1a43b0; --vP:#5a26a0; --vC:#0c2a22; --vC2:#1a4634}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="starry"], :root:not([data-theme="light"]) [data-art-palette="vangogh"]{--g0:#ffc400; --g1:#ffe03a; --g2:#1e9db4; --g3:#7ad6d2; --g4:#4f74ff; --g5:#b48ae0; --g6:#e8890c; --g7:#fff6c2; --gs1:#1c3fc4; --gs2:#0c1d66}}
:root[data-theme="dark"] [data-art-palette="starry"], :root[data-theme="dark"] [data-art-palette="vangogh"]{--g0:#ffc400; --g1:#ffe03a; --g2:#1e9db4; --g3:#7ad6d2; --g4:#4f74ff; --g5:#b48ae0; --g6:#e8890c; --g7:#fff6c2; --gs1:#1c3fc4; --gs2:#0c1d66}
[data-mas-colours="starry"]{--mas-pl-c1:#ffc400; --mas-pl-c2:#1c3fc4; --mas-pl-c3:#e8890c; --mas-pl-c4:#1e9db4; --mas-pl-c5:#0c228a; --mas-pl-c6:#6a3a9c; --mas-pl-c7:#7ad6d2; --mas-pl-c8:#7c7a14; --mas-pl-accent:#1c3fc4; --mas-pl-wash1:#a6b8f2; --mas-pl-wash2:#95dad4; --mas-pl-wash3:#ffdf80; --mas-pd-c1:#ffc400; --mas-pd-c2:#ffe03a; --mas-pd-c3:#1e9db4; --mas-pd-c4:#7ad6d2; --mas-pd-c5:#4f74ff; --mas-pd-c6:#b48ae0; --mas-pd-c7:#e8890c; --mas-pd-c8:#fff6c2; --mas-pd-accent:#ffc400; --mas-pd-wash1:#0c1d66; --mas-pd-wash2:#12287e; --mas-pd-wash3:#1c3fc4}
/* Vivid folk (btsa_own) */
[data-art-palette="folk"]{--g0:#e4007c; --g1:#0047ab; --g2:#ffb000; --g3:#00a86b; --g4:#d7263d; --g5:#1fb5ad; --g6:#ff5fa2; --g7:#9ccc3c; --gs1:#ffd9a8; --gs2:#fff0d6; --vN:#17122a; --vB:#0047ab; --vB2:#06337a; --vA:#1fb5ad; --vA2:#9be0da; --vY:#ffb000; --vY2:#ffd36b; --vW:#fff6e0; --vR:#0047ab; --vR2:#06337a; --vO:#e4007c; --vG:#00a86b; --vM:#ff5fa2; --vM2:#b0306e; --vT:#2a1f55; --vP:#5a1f6b; --vC:#0a3a2a; --vC2:#126b4a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="folk"]{--g0:#ffb000; --g1:#ff5fa2; --g2:#1fb5ad; --g3:#9ccc3c; --g4:#ff4fa0; --g5:#5aa0ff; --g6:#ffd36b; --g7:#2fd08a; --gs1:#3a1f2e; --gs2:#2a1d33}}
:root[data-theme="dark"] [data-art-palette="folk"]{--g0:#ffb000; --g1:#ff5fa2; --g2:#1fb5ad; --g3:#9ccc3c; --g4:#ff4fa0; --g5:#5aa0ff; --g6:#ffd36b; --g7:#2fd08a; --gs1:#3a1f2e; --gs2:#2a1d33}
[data-mas-colours="folk"]{--mas-pl-c1:#e4007c; --mas-pl-c2:#0047ab; --mas-pl-c3:#ffb000; --mas-pl-c4:#00a86b; --mas-pl-c5:#d7263d; --mas-pl-c6:#1fb5ad; --mas-pl-c7:#ff5fa2; --mas-pl-c8:#9ccc3c; --mas-pl-accent:#e4007c; --mas-pl-wash1:#ffd9a8; --mas-pl-wash2:#ffc9dc; --mas-pl-wash3:#cfe9e0; --mas-pd-c1:#ffb000; --mas-pd-c2:#ff5fa2; --mas-pd-c3:#1fb5ad; --mas-pd-c4:#9ccc3c; --mas-pd-c5:#ff4fa0; --mas-pd-c6:#5aa0ff; --mas-pd-c7:#ffd36b; --mas-pd-c8:#2fd08a; --mas-pd-accent:#ffb000; --mas-pd-wash1:#2a1d33; --mas-pd-wash2:#3a1f2e; --mas-pd-wash3:#1f2f3a}
/* Wave blue (btsa_own) */
[data-art-palette="wave"]{--g0:#0b3d78; --g1:#5b8fc7; --g2:#c9a66b; --g3:#1d2b53; --g4:#9cc3e4; --g5:#b46b52; --g6:#3f6f8f; --g7:#e2c98f; --gs1:#cfe1f2; --gs2:#f2e6c8; --vN:#0a2142; --vB:#0b3d78; --vB2:#082a55; --vA:#5b8fc7; --vA2:#9cc3e4; --vY:#e9d9a0; --vY2:#f6eccb; --vW:#fffdf5; --vR:#0b3d78; --vR2:#082a55; --vO:#c9a66b; --vG:#8a6a4c; --vM:#5b6f8f; --vM2:#3f4f6f; --vT:#1d2b53; --vP:#2b3f6b; --vC:#0a1f33; --vC2:#16314d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="wave"]{--g0:#9cc3e4; --g1:#f4efe1; --g2:#5b8fc7; --g3:#e7d3a6; --g4:#c9a66b; --g5:#7fb0dc; --g6:#e0a08a; --g7:#d9e6f2; --gs1:#123a6b; --gs2:#0b2a52}}
:root[data-theme="dark"] [data-art-palette="wave"]{--g0:#9cc3e4; --g1:#f4efe1; --g2:#5b8fc7; --g3:#e7d3a6; --g4:#c9a66b; --g5:#7fb0dc; --g6:#e0a08a; --g7:#d9e6f2; --gs1:#123a6b; --gs2:#0b2a52}
[data-mas-colours="wave"]{--mas-pl-c1:#0b3d78; --mas-pl-c2:#5b8fc7; --mas-pl-c3:#c9a66b; --mas-pl-c4:#1d2b53; --mas-pl-c5:#9cc3e4; --mas-pl-c6:#b46b52; --mas-pl-c7:#3f6f8f; --mas-pl-c8:#e2c98f; --mas-pl-accent:#0b3d78; --mas-pl-wash1:#d6e5f3; --mas-pl-wash2:#efe3c4; --mas-pl-wash3:#c3d9ee; --mas-pd-c1:#9cc3e4; --mas-pd-c2:#f4efe1; --mas-pd-c3:#5b8fc7; --mas-pd-c4:#e7d3a6; --mas-pd-c5:#c9a66b; --mas-pd-c6:#7fb0dc; --mas-pd-c7:#e0a08a; --mas-pd-c8:#d9e6f2; --mas-pd-accent:#f4efe1; --mas-pd-wash1:#0b2a52; --mas-pd-wash2:#123a6b; --mas-pd-wash3:#1b4f86}
/* Gold leaf (btsa_own) */
[data-art-palette="gold"]{--g0:#b8860b; --g1:#1a1410; --g2:#d4a017; --g3:#2e8b7a; --g4:#b5462f; --g5:#7a5c1e; --g6:#e3c565; --g7:#3a5a8c; --gs1:#f1dc9c; --gs2:#f8eccb; --vN:#14100a; --vB:#5a4312; --vB2:#3a2c10; --vA:#b8860b; --vA2:#e3c565; --vY:#f3c94a; --vY2:#ffe7a0; --vW:#fff8e0; --vR:#2e6b5f; --vR2:#1d4a42; --vO:#d4a017; --vG:#7a5c1e; --vM:#6b4a2a; --vM2:#4a3218; --vT:#2a2016; --vP:#3a2a1a; --vC:#0f1a14; --vC2:#1d3a2e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="gold"]{--g0:#e3b52a; --g1:#f3d77a; --g2:#d4a017; --g3:#3fb39c; --g4:#e0644a; --g5:#c99a3a; --g6:#fff1c2; --g7:#6f93d0; --gs1:#3a2c12; --gs2:#241b0d}}
:root[data-theme="dark"] [data-art-palette="gold"]{--g0:#e3b52a; --g1:#f3d77a; --g2:#d4a017; --g3:#3fb39c; --g4:#e0644a; --g5:#c99a3a; --g6:#fff1c2; --g7:#6f93d0; --gs1:#3a2c12; --gs2:#241b0d}
[data-mas-colours="gold"]{--mas-pl-c1:#b8860b; --mas-pl-c2:#1a1410; --mas-pl-c3:#d4a017; --mas-pl-c4:#2e8b7a; --mas-pl-c5:#b5462f; --mas-pl-c6:#7a5c1e; --mas-pl-c7:#e3c565; --mas-pl-c8:#3a5a8c; --mas-pl-accent:#8a6208; --mas-pl-wash1:#f3dfa2; --mas-pl-wash2:#ead19a; --mas-pl-wash3:#f7ebc6; --mas-pd-c1:#e3b52a; --mas-pd-c2:#f3d77a; --mas-pd-c3:#d4a017; --mas-pd-c4:#3fb39c; --mas-pd-c5:#e0644a; --mas-pd-c6:#c99a3a; --mas-pd-c7:#fff1c2; --mas-pd-c8:#6f93d0; --mas-pd-accent:#f3c94a; --mas-pd-wash1:#2a2010; --mas-pd-wash2:#3a2c12; --mas-pd-wash3:#4f3b14}
/* Primaries (btsa_own) */
[data-art-palette="primary"]{--g0:#d7261e; --g1:#1f4fb4; --g2:#f5c400; --g3:#141414; --g4:#a51c16; --g5:#163a85; --g6:#d9a800; --g7:#5a5a5a; --gs1:#dce5f7; --gs2:#fbf0c2; --vN:#0d0d12; --vB:#1f4fb4; --vB2:#163a85; --vA:#5a8cff; --vA2:#bcd0ff; --vY:#f5c400; --vY2:#ffe36b; --vW:#fffbea; --vR:#1f4fb4; --vR2:#163a85; --vO:#d7261e; --vG:#a51c16; --vM:#3a3a44; --vM2:#24242c; --vT:#141414; --vP:#2a2a33; --vC:#0a0a0e; --vC2:#1c1c24}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="primary"]{--g0:#ff4a3d; --g1:#5a8cff; --g2:#ffd21a; --g3:#f4f1e8; --g4:#ff7a6e; --g5:#8fb0ff; --g6:#ffe36b; --g7:#bdbdbd; --gs1:#16203a; --gs2:#2a1616}}
:root[data-theme="dark"] [data-art-palette="primary"]{--g0:#ff4a3d; --g1:#5a8cff; --g2:#ffd21a; --g3:#f4f1e8; --g4:#ff7a6e; --g5:#8fb0ff; --g6:#ffe36b; --g7:#bdbdbd; --gs1:#16203a; --gs2:#2a1616}
[data-mas-colours="primary"]{--mas-pl-c1:#d7261e; --mas-pl-c2:#1f4fb4; --mas-pl-c3:#f5c400; --mas-pl-c4:#141414; --mas-pl-c5:#a51c16; --mas-pl-c6:#163a85; --mas-pl-c7:#d9a800; --mas-pl-c8:#5a5a5a; --mas-pl-accent:#d7261e; --mas-pl-wash1:#f7d9d4; --mas-pl-wash2:#d9e2f5; --mas-pl-wash3:#fbefb8; --mas-pd-c1:#ff4a3d; --mas-pd-c2:#5a8cff; --mas-pd-c3:#ffd21a; --mas-pd-c4:#f4f1e8; --mas-pd-c5:#ff7a6e; --mas-pd-c6:#8fb0ff; --mas-pd-c7:#ffe36b; --mas-pd-c8:#bdbdbd; --mas-pd-accent:#ffd21a; --mas-pd-wash1:#1c1c22; --mas-pd-wash2:#2a1616; --mas-pd-wash3:#16203a}
/* Clear colours (open_published_palette) */
[data-art-palette="clear"]{--g0:#0072b2; --g1:#d55e00; --g2:#009e73; --g3:#cc79a7; --g4:#e69f00; --g5:#56b4e9; --g6:#000000; --g7:#f0e442; --gs1:#dceef9; --gs2:#fdf0d9; --vN:#0b1a2a; --vB:#0072b2; --vB2:#00507e; --vA:#56b4e9; --vA2:#a9daf5; --vY:#e69f00; --vY2:#f0e442; --vW:#fffbe0; --vR:#0072b2; --vR2:#00507e; --vO:#d55e00; --vG:#009e73; --vM:#cc79a7; --vM2:#8f4f73; --vT:#1d3a52; --vP:#4a3a5f; --vC:#00382a; --vC2:#005c45}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-art-palette="clear"]{--g0:#e69f00; --g1:#56b4e9; --g2:#f0e442; --g3:#009e73; --g4:#cc79a7; --g5:#d55e00; --g6:#ffffff; --g7:#0072b2; --gs1:#0d2433; --gs2:#1d1a10}}
:root[data-theme="dark"] [data-art-palette="clear"]{--g0:#e69f00; --g1:#56b4e9; --g2:#f0e442; --g3:#009e73; --g4:#cc79a7; --g5:#d55e00; --g6:#ffffff; --g7:#0072b2; --gs1:#0d2433; --gs2:#1d1a10}
[data-mas-colours="clear"]{--mas-pl-c1:#0072b2; --mas-pl-c2:#d55e00; --mas-pl-c3:#009e73; --mas-pl-c4:#cc79a7; --mas-pl-c5:#e69f00; --mas-pl-c6:#56b4e9; --mas-pl-c7:#000000; --mas-pl-c8:#f0e442; --mas-pl-accent:#0072b2; --mas-pl-wash1:#dfeef8; --mas-pl-wash2:#fbe7d3; --mas-pl-wash3:#dcf0e9; --mas-pd-c1:#e69f00; --mas-pd-c2:#56b4e9; --mas-pd-c3:#f0e442; --mas-pd-c4:#009e73; --mas-pd-c5:#cc79a7; --mas-pd-c6:#d55e00; --mas-pd-c7:#ffffff; --mas-pd-c8:#0072b2; --mas-pd-accent:#f0e442; --mas-pd-wash1:#0d2433; --mas-pd-wash2:#1d1a10; --mas-pd-wash3:#0b2a22}
/* ==== END GENERATED ART PALETTES ==== */