/*
 * matölye design tokens — loaded first. The palette follows the famolu.com family (school logo
 * navy, royal blue, sky and gold; Inter) so Matölye matches FAMO Öğrenci and FAMO Sonuç.
 * Components use the semantic tokens below; html[data-theme="dark"] swaps them.
 * Legacy names (navy, paper, cream, violet…) are aliases so older rules follow the theme.
 * Never use color-mix() or relative colours here: classroom boards often run older browsers.
 */

/* Inter variable (OFL), self-hosted. The declared range stops at 800 so older 900-weight rules
   render at ExtraBold, the heaviest weight the family look uses. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque variable (OFL, fonts/bricolage-OFL.txt), self-hosted: the display face for titles
   and big numbers (--font-title). Optical size follows the font size, so large titles tighten. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Neutrals: the famolu.com family canvas (FAMO Öğrenci, FAMO Sonuç): cool paper under a
     soft school-colour mesh (sky, navy, gold) and a faint dot grid. */
  --bg: #f5f7fa;
  --bg-grid: rgba(11, 27, 51, .07);
  --bg-glow-a: rgba(27, 163, 221, .18);
  --bg-glow-b: rgba(29, 79, 159, .1);
  --bg-glow-c: rgba(251, 191, 36, .1);
  --surface: #ffffff;
  --surface-2: #f0f3f8;
  --surface-3: #e2e9f2;
  --glass: rgba(245, 247, 250, .82);
  --glass-strong: rgba(255, 255, 255, .95);
  --glass-line: rgba(11, 27, 51, .1);
  --scrim: rgba(6, 14, 28, .55);
  --ink: #0b1628;
  --ink-2: #3a4a5f;
  --ink-3: #56657a;
  --line: #e0e6ee;
  --line-strong: #bcc8d8;
  --inverse: #0b1b33;
  --inverse-2: #12305e;
  --on-inverse: #ffffff;
  --edge: #0b1b33;
  --edge-line: #0b1b33;

  /* Brand (school navy/royal blue) and accents. *-ink is readable text on surfaces; *-tint is a quiet fill. */
  --brand: #1d4f9f;
  --brand-strong: #163e7f;
  --brand-ink: #1a4a95;
  --brand-tint: #e8f0fb;
  --brand-tint-2: #d4e4f7;
  /* The solid colour under the gradient keeps hover fades colour-to-colour: without it a button fades in from
     transparent and its text sits on the page for the transition (contrast 1:1). */
  --brand-grad: linear-gradient(180deg, #2560b8, #1d4f9f) #1d4f9f;
  --brand-lip: #163e7f;
  --on-primary: #ffffff;
  --primary-hover: #163e7f;
  --brand-sheen: linear-gradient(90deg, #0b1b33, #1d4f9f 55%, #1ba3dd);
  --wordmark-a: #1d4f9f;
  --wordmark-b: #1ba3dd;
  --on-brand: #ffffff;
  --sky-base: #1ba3dd;
  --sky-ink: #0a6796;
  --sky-tint: #e3f4fc;
  --coral-base: #e8590c;
  --coral-ink: #b0440a;
  --coral-tint: #fdeee4;
  --apricot-base: #f59f4a;
  --apricot-ink: #8a4a0c;
  --apricot-tint: #fff3e3;
  --gold-base: #f0aa0e;
  --gold-ink: #7a5200;
  --gold-tint: #fef4dc;
  --gold-fill: #f7c44f;
  /* Gold as a control outline (a Hızlı Parmak steal): 3:1 against white and both player tints. */
  --gold-line: #b07a00;
  --on-fill: #0b1628;
  --green-base: #147a3a;
  --green-ink: #126b33;
  --green-tint: #e7f6ec;
  --green-fill: #147a3a;
  --red-base: #c62828;
  --red-ink: #b02222;
  --red-tint: #fdecec;
  --red-fill: #c62828;
  --focus: #1a8fcc;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a4a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Player identity: blue versus orange in every game. The pair stays apart for red–green colour
     blindness; names, sides, emblems and text always carry the same meaning as the colour. */
  --player-a: #1f6fd0;
  --player-a-ink: #17529c;
  --player-a-tint: #e7f0fc;
  /* -line: control and lane outlines, 3:1 against white and both tints (WCAG 1.4.11). */
  --player-a-line: #3f84d6;
  --player-b: #e8590c;
  --player-b-ink: #983a06;
  --player-b-tint: #fff0e4;
  --player-b-line: #d2621a;
  /* Solid player fills that carry text (Kapmaca's captured cells): AA with --on-player-solid in every theme. */
  --player-a-solid: #1f6fd0;
  --player-b-solid: #c2410c;
  --on-player-solid: #ffffff;
  /* Halat Çekme rope: fibre and twist shadow (unit-arena.css). */
  --rope-fiber: #c99656;
  --rope-twist: #8a5a24;
  /* Hızlı Parmak card charts: six categorical hues in fixed order (A–D series, pie slices), checked with the
     dataviz validator for lightness, chroma, colour-vision separation and 3:1 contrast on the surface. */
  --chart-1: #2f5fb8;
  --chart-2: #00897b;
  --chart-3: #b07400;
  --chart-4: #9a3fb5;
  --chart-5: #5d8c1c;
  --chart-6: #d64f86;

  /* Integer signs (tam sayı laboratuvarı): positive = blue, negative = orange, zero = neutral.
     Fills carry white glyphs at ≥ 4.5:1; *-line strokes reach 3:1 on the surface; *-ink is text. */
  --sign-pos: #1f6fd0;
  --sign-pos-edge: #17529c;
  --sign-pos-line: #1f6fd0;
  --sign-pos-ink: #17529c;
  --sign-pos-tint: #e7f0fc;
  --sign-neg: #c2410c;
  --sign-neg-edge: #8a2f08;
  --sign-neg-line: #e8590c;
  --sign-neg-ink: #a63a07;
  --sign-neg-tint: #fff0e4;
  --sign-zero: #56657a;
  --on-sign: #ffffff;

  /* Elevation: layered navy shadows (contact + key + ambient), as on the famolu.com panels.
     --panel-line is the hairline ring a raised surface draws instead of a hard border;
     --highlight is the 1px inner top light that makes a surface read as lifted. */
  --shadow-xs: 0 1px 1px rgba(11, 27, 51, .04), 0 1px 3px rgba(11, 27, 51, .06);
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .05), 0 3px 8px -2px rgba(11, 27, 51, .06), 0 12px 24px -14px rgba(11, 27, 51, .18);
  --shadow-md: 0 1px 2px rgba(11, 27, 51, .05), 0 8px 20px -10px rgba(11, 27, 51, .12), 0 28px 56px -32px rgba(11, 27, 51, .32);
  --shadow-lg: 0 2px 4px rgba(11, 27, 51, .05), 0 18px 36px -18px rgba(11, 27, 51, .2), 0 44px 88px -40px rgba(11, 27, 51, .4);
  --shadow-pop: 0 10px 0 -6px rgba(11, 27, 51, .1);
  --shadow-brand: 0 1px 2px rgba(22, 62, 127, .3), 0 8px 18px -8px rgba(29, 79, 159, .5);
  --panel-line: rgba(11, 27, 51, .09);
  /* Edge of a launcher tile: a mid blue that keeps 3:1 against white, the tint, dark surfaces and the navy panel. */
  --launcher-edge: #5b82c0;
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .75);
  --surface-raised: #ffffff;
  --track: #e8edf4;
  --ring-focus: 0 0 0 3px rgba(26, 143, 204, .45);

  /* Shape, spacing, type, motion */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --header-height: 64px;
  --content-max: 1340px;
  --touch: 52px;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Unit families (B · bold): every unit and game group takes one family colour. --family-<name> and
     --family-<name>-2 are the cover gradient (white text passes AA on both stops), -tint is the soft
     fill behind card art and -ink the family colour for text on surface or tint. */
  --family-numbers: #1d4f9f;
  --family-numbers-2: #2a66c4;
  --family-numbers-tint: #e6effb;
  --family-numbers-ink: #1a4a95;
  --family-fractions: #9c3408;
  --family-fractions-2: #c2410c;
  --family-fractions-tint: #fdece2;
  --family-fractions-ink: #a33a09;
  --family-algebra: #5a35a5;
  --family-algebra-2: #7d4fd0;
  --family-algebra-tint: #efe9fb;
  --family-algebra-ink: #5a35a5;
  --family-geometry: #09615a;
  --family-geometry-2: #0f8076;
  --family-geometry-tint: #e0f3f0;
  --family-geometry-ink: #08605a;
  --family-measure: #0a5a86;
  --family-measure-2: #0f78ad;
  --family-measure-tint: #e0f1fa;
  --family-measure-ink: #0a5a86;
  --family-data: #17663f;
  --family-data-2: #1f7a4d;
  --family-data-tint: #e3f4ea;
  --family-data-ink: #17663f;
  --family-chance: #8f2350;
  --family-chance-2: #c03672;
  --family-chance-tint: #fbe8f0;
  --family-chance-ink: #9c2a5a;
  /* The navy masthead behind page titles; white text passes AA on every stop. */
  --masthead: radial-gradient(120% 140% at 100% 0%, rgba(27, 163, 221, .34), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(240, 170, 14, .16), transparent 60%), linear-gradient(135deg, #0b1b33 0%, #163e7f 58%, #1d4f9f 100%) #0b1b33;
  --masthead-line: rgba(255, 255, 255, .14);
  --masthead-ink-2: #e6eefa;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .14s;
  --dur: .22s;
  --dur-slow: .4s;
  --press-scale: .97;

  /* Title tracking: tightens as size grows. */
  --tracking-tight: -.012em;
  --tracking-display: -.032em;

  /* Legacy aliases. New rules use the semantic names above. */
  --navy: var(--ink);
  --navy-2: var(--inverse-2);
  --navy-3: var(--ink-3);
  --cream: var(--bg);
  --paper: var(--surface);
  --white: var(--surface);
  --surface-soft: var(--surface-2);
  --surface-warm: var(--apricot-tint);
  --ink-soft: var(--ink-2);
  --coral: var(--coral-base);
  --coral-dark: var(--coral-ink);
  --apricot: var(--apricot-base);
  --apricot-dark: var(--apricot-ink);
  --apricot-soft: var(--apricot-tint);
  --gold: var(--gold-base);
  --gold-soft: var(--gold-tint);
  --violet: var(--brand);
  --violet-dark: var(--brand-ink);
  --violet-soft: var(--brand-tint);
  --green: var(--green-base);
  --red: var(--red-base);
  --primary: var(--brand);
  --primary-dark: var(--brand-ink);
  --primary-soft: var(--brand-tint);
  --grape: #2f6fd6;
  --lavender: var(--brand-tint-2);
  --peach: var(--coral-tint);
  --grade-5: var(--sky-base);
  --grade-6: var(--gold-base);
  --grade-7: var(--coral-base);
  --grade-8: var(--brand);
  --accent: var(--sky-base);
  --accent-ink: var(--ink);
  --yellow: var(--gold-fill);
  --yellow-soft: var(--gold-tint);
  --teal: var(--brand);
  --teal-dark: var(--brand-ink);
  --blue: var(--brand);
  --blue-dark: var(--brand-ink);
  --candy: var(--coral-base);
  --pink: var(--coral-base);
  --lime: var(--gold-base);
  --mint: var(--sky-tint);
  --blob: var(--brand);

  /* Topic-game world skeleton (plan 104 §6.1): a world (a topic family) re-points these six tokens in
     its own scope; until then every world uses the school sky. Band = the strip behind a world's title,
     accent = particles and highlights, ink = text on the band, model = the manipulative's fill. */
  --world-band: var(--sky-tint);
  --world-band-edge: var(--sky-base);
  --world-accent: var(--sky-base);
  --world-ink: var(--sky-ink);
  --world-model: var(--brand-tint);
  --world-model-edge: var(--brand);

  /* Geometry rooms (plan C, D12). Solids: three face tones the views shade between (lit, half lit, in shade),
     edges at 3:1 or more against every tone, the floor and its grid, the glass box and the glass solids' edges (3:1
     against the stage and the floor: light in dark, where the solid edge would vanish on the dark stage), water in a
     glass solid (3:1 against the floor), a cut, the selection and six paints (lettered A-F, pastel so their letter in --solid-paint-ink reads);
     the inside of an opened net is --solid-face-inside, a card tone, so it never reads as an outer face. Shapes: fill, edge, dot and label.
     Chips: the two room statuses. B's boards draw C's figures, so these exist from app start. */
  --solid-face-light: #eaf3fc;
  --solid-face-mid: #b8d3f0;
  --solid-face-dark: #7fa6d6;
  --solid-face-inside: #f2e2c4;
  --solid-edge: #16365f;
  --solid-edge-width: 2.5px;
  --solid-floor: #e4ebf3;
  --solid-grid: #c3cfdd;
  --solid-glass: rgba(92, 160, 230, .16);
  --solid-glass-edge: #16365f;
  --solid-water: #3a86d1;
  --solid-cut: #c2410c;
  --solid-select: #d9480f;
  --solid-paint-a: #f4a6a6;
  --solid-paint-b: #9cc3f5;
  --solid-paint-c: #a8dcae;
  --solid-paint-d: #f6dc84;
  --solid-paint-e: #c9b2ee;
  --solid-paint-f: #f7bd8a;
  --solid-paint-ink: #0b1628;
  --shape-fill: #cfe3f7;
  --shape-edge: #16365f;
  --shape-dot: #0b1628;
  --shape-label: #0b1628;
  --atolye-tekrar: #fde9c4;
  --atolye-tekrar-ink: #6d3a0c;
  --atolye-kesif: #d7efe0;
  --atolye-kesif-ink: #14532d;
}

/* Dark: school navy at night. Surfaces step up in lightness instead of casting shadows; the
   primary fill turns sky blue with navy text, as on the famolu.com sites. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a1220;
  --bg-grid: rgba(255, 255, 255, .055);
  --bg-glow-a: rgba(27, 163, 221, .2);
  --bg-glow-b: rgba(29, 79, 159, .28);
  --bg-glow-c: rgba(251, 191, 36, .05);
  --surface: #111c2e;
  --surface-2: #162336;
  --surface-3: #1c2d45;
  --glass: rgba(10, 18, 32, .8);
  --glass-strong: rgba(17, 28, 46, .96);
  --glass-line: rgba(255, 255, 255, .08);
  --scrim: rgba(2, 6, 14, .7);
  --ink: #e6edf6;
  --ink-2: #b6c4d6;
  --ink-3: #97a8be;
  --line: #22324a;
  --line-strong: #34496a;
  --inverse: #1a2d4a;
  --inverse-2: #22395c;
  --on-inverse: #ffffff;
  --edge: #03070e;
  --edge-line: #3a5070;

  /* --brand stays a mid blue that carries white text; primary buttons use the sky fill with navy text. */
  --brand: #2c74cc;
  --brand-strong: #2566b8;
  --brand-ink: #7cc6f5;
  --brand-tint: #14294a;
  --brand-tint-2: #1a3558;
  --brand-grad: linear-gradient(180deg, #6fc2f5, #5cb8f2) #5cb8f2;
  --brand-lip: #2f86c4;
  --on-primary: #062038;
  --primary-hover: #86ccf6;
  --brand-sheen: linear-gradient(90deg, #1d4f9f, #5cb8f2 60%, #8fd8f7);
  /* Unit families at night: the same covers, darker tints and lighter inks. */
  --family-numbers-tint: #15284a;
  --family-numbers-ink: #8fc0f7;
  --family-fractions-tint: #3a2216;
  --family-fractions-ink: #ffb088;
  --family-algebra-tint: #261d44;
  --family-algebra-ink: #c7b3f7;
  --family-geometry-tint: #0e2e2b;
  --family-geometry-ink: #6fd6c8;
  --family-measure-tint: #0f2b3e;
  --family-measure-ink: #7dd3fc;
  --family-data-tint: #12301f;
  --family-data-ink: #86dcae;
  --family-chance-tint: #3a1628;
  --family-chance-ink: #f5a3c5;
  --masthead: radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, .26), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(245, 185, 74, .12), transparent 60%), linear-gradient(135deg, #0d2042 0%, #163e7f 62%, #1d4f9f 100%) #0d2042;
  --masthead-line: rgba(255, 255, 255, .12);
  --wordmark-a: #5cb8f2;
  --wordmark-b: #8fd8f7;
  --on-brand: #ffffff;
  --sky-base: #38bdf8;
  --sky-ink: #7dd3fc;
  --sky-tint: #102c40;
  --coral-base: #ff8b4d;
  --coral-ink: #ffb088;
  --coral-tint: #3a2215;
  --apricot-base: #ffb46b;
  --apricot-ink: #ffc98f;
  --apricot-tint: #36271a;
  --gold-base: #f5b94a;
  --gold-ink: #f7cf72;
  --gold-tint: #342a12;
  --gold-fill: #4a3a10;
  --gold-line: #f5b94a;
  --on-fill: #fff3cf;
  --green-base: #5ccb8a;
  --green-ink: #7fdca3;
  --green-tint: #12301d;
  --green-fill: #1c7f45;
  --red-base: #f87171;
  --red-ink: #fca5a5;
  --red-tint: #3a1618;
  --red-fill: #c23434;
  --focus: #5cb8f2;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6c4d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --player-a: #5ca8f5;
  --player-a-ink: #a3cffb;
  --player-a-tint: #13284a;
  --player-a-line: #3f82cc;
  --player-b: #ff8b4d;
  --player-b-ink: #ffbb94;
  --player-b-tint: #3a2214;
  --player-b-line: #c8693a;
  --player-a-solid: #5ca8f5;
  --player-b-solid: #ff8b4d;
  --on-player-solid: #0b1628;
  --rope-fiber: #d9a868;
  --rope-twist: #7a4c1c;
  --chart-1: #5b8fe6;
  --chart-2: #18a090;
  --chart-3: #bf8526;
  --chart-4: #a96fcc;
  --chart-5: #6f9e2c;
  --chart-6: #d6628f;

  --sign-pos: #2c74cc;
  --sign-pos-edge: #1a4a8a;
  --sign-pos-line: #5ca8f5;
  --sign-pos-ink: #8cc4fa;
  --sign-pos-tint: #13284a;
  --sign-neg: #c2410c;
  --sign-neg-edge: #7a2a06;
  --sign-neg-line: #ff8b4d;
  --sign-neg-ink: #ffa877;
  --sign-neg-tint: #3a2214;
  --sign-zero: #97a8be;
  --on-sign: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -6px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 30px 72px -24px rgba(0, 0, 0, .75);
  --shadow-pop: 0 10px 0 -6px rgba(0, 0, 0, .4);
  --shadow-brand: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(92, 184, 242, .4);
  --panel-line: rgba(255, 255, 255, .075);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
  --surface-raised: #1c2d45;
  --track: #0c1626;
  --ring-focus: 0 0 0 3px rgba(92, 184, 242, .5);

  --grape: #7cb8ff;
  --accent-ink: var(--ink);

  --world-band: var(--sky-tint);
  --world-band-edge: var(--sky-base);
  --world-accent: var(--sky-base);
  --world-ink: var(--sky-ink);
  --world-model: var(--brand-tint);
  --world-model-edge: var(--brand);

  --solid-face-light: #a9c8ec;
  --solid-face-mid: #7ea4d3;
  --solid-face-dark: #557aa9;
  --solid-face-inside: #c9ad80;
  --solid-edge: #12233f;
  --solid-floor: #273d61;
  --solid-grid: #405a88;
  --solid-glass: rgba(124, 184, 255, .14);
  --solid-glass-edge: #cfe3f7;
  --solid-water: #5aa6f0;
  --solid-cut: #ff9a5c;
  --solid-select: #ffa94d;
  --shape-fill: #2a4a70;
  --shape-edge: #cfe3f7;
  --shape-dot: #e6edf6;
  --shape-label: #e6edf6;
  --atolye-tekrar: #4a3415;
  --atolye-tekrar-ink: #ffe2b0;
  --atolye-kesif: #183a28;
  --atolye-kesif-ink: #c4f0d3;
}

/* High contrast is its own black-on-white palette and wins over either theme. */
body.high-contrast,
body.is-high-contrast,
body[data-contrast="high"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-grid: transparent;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f0f0f0;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-line: #000000;
  --ink: #000000;
  --ink-2: #1b1b1b;
  --ink-3: #1b1b1b;
  --line: #000000;
  --line-strong: #000000;
  --panel-line: #000000;
  --launcher-edge: #000000;
  --highlight: inset 0 0 0 transparent;
  --surface-raised: #ffffff;
  --track: #ffffff;
  --ring-focus: 0 0 0 3px #000000;
  --inverse: #000000;
  --inverse-2: #111111;
  --edge: #000000;
  --edge-line: #000000;
  --brand: #0b3a8c;
  --brand-strong: #082d6e;
  --brand-ink: #082d6e;
  --brand-tint: #f0f5ff;
  --brand-tint-2: #dfe9fb;
  --brand-grad: linear-gradient(180deg, #0b3a8c, #0b3a8c) #0b3a8c;
  --brand-lip: #000000;
  --on-brand: #ffffff;
  --on-primary: #ffffff;
  --primary-hover: #082d6e;
  --wordmark-a: #000000;
  --wordmark-b: #0b3a8c;
  /* High contrast: no family colours or masthead; covers read black on white with a solid edge. */
  --family-numbers: #0b3a8c; --family-numbers-2: #0b3a8c; --family-numbers-tint: #ffffff; --family-numbers-ink: #000000;
  --family-fractions: #0b3a8c; --family-fractions-2: #0b3a8c; --family-fractions-tint: #ffffff; --family-fractions-ink: #000000;
  --family-algebra: #0b3a8c; --family-algebra-2: #0b3a8c; --family-algebra-tint: #ffffff; --family-algebra-ink: #000000;
  --family-geometry: #0b3a8c; --family-geometry-2: #0b3a8c; --family-geometry-tint: #ffffff; --family-geometry-ink: #000000;
  --family-measure: #0b3a8c; --family-measure-2: #0b3a8c; --family-measure-tint: #ffffff; --family-measure-ink: #000000;
  --family-data: #0b3a8c; --family-data-2: #0b3a8c; --family-data-tint: #ffffff; --family-data-ink: #000000;
  --family-chance: #0b3a8c; --family-chance-2: #0b3a8c; --family-chance-tint: #ffffff; --family-chance-ink: #000000;
  --masthead: #ffffff;
  --masthead-line: #000000;
  --masthead-ink-2: #1b1b1b;
  /* Sky keeps the light palette in both themes, so the dark theme's sky never leaks into high contrast. */
  --sky-base: #1ba3dd;
  --sky-ink: #0a6796;
  --sky-tint: #e3f4fc;
  --coral-ink: #9a2d1f;
  --coral-tint: #ffffff;
  --apricot-ink: #6d3a0c;
  --apricot-tint: #ffffff;
  --gold-ink: #5a4000;
  --gold-tint: #fff09a;
  --gold-fill: #ffd500;
  --on-fill: #000000;
  --green-ink: #0b5a3d;
  --green-tint: #ffffff;
  --red-ink: #8c1d2d;
  --red-tint: #ffffff;
  /* Seat rims, turn edges and marks: blue and orange stay told apart, at 3:1 or better on white. */
  --player-a: #0b3a8c;
  --player-a-line: #0b3a8c;
  --player-b: #b33c00;
  --player-b-line: #b33c00;
  --player-a-ink: #0b3a8c;
  --player-a-tint: #ffffff;
  --player-b-ink: #6d2508;
  --player-b-tint: #ffffff;
  --player-a-solid: #0b3a8c;
  --player-b-solid: #6d2508;
  --on-player-solid: #ffffff;
  --rope-fiber: #000000;
  --rope-twist: #ffffff;
  --chart-1: #1d3f8a;
  --chart-2: #00665b;
  --chart-3: #7a5000;
  --chart-4: #6e2389;
  --chart-5: #3d6310;
  --chart-6: #a3295c;
  --sign-pos: #0b3a8c;
  --sign-pos-edge: #000000;
  --sign-pos-line: #0b3a8c;
  --sign-pos-ink: #0b3a8c;
  --sign-pos-tint: #ffffff;
  --sign-neg: #8a2c06;
  --sign-neg-edge: #000000;
  --sign-neg-line: #8a2c06;
  --sign-neg-ink: #6d2508;
  --sign-neg-tint: #ffffff;
  --sign-zero: #1b1b1b;
  --on-sign: #ffffff;
  --focus: #000000;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Legacy aliases resolve on :root, so the palette is restated here. */
  --navy: #000000;
  --navy-2: #111111;
  --navy-3: #404040;
  --cream: #ffffff;
  --paper: #ffffff;
  --white: #ffffff;
  --surface-soft: #ffffff;
  --ink-soft: #1b1b1b;
  --violet-soft: #f0f5ff;
  --primary-soft: #f0f5ff;
  --apricot-soft: #ffffff;
  --gold-soft: #fff09a;
  --coral: #ff5545;
  --yellow: #ffd500;
  --yellow-soft: #fff09a;
  --teal: #0b3a8c;
  --blue: #0b3a8c;
  --primary: #0b3a8c;
  --primary-dark: #082d6e;
  --violet: #0b3a8c;
  --violet-dark: #082d6e;
  --coral-dark: #9a2d1f;
  --apricot-dark: #6d3a0c;
  --lavender: #dfe9fb;
  --peach: #ffffff;
  /* High contrast drops the world bands (topic-games.css); the rest is black on white. */
  --world-band: #ffffff;
  --world-band-edge: #000000;
  --world-accent: #000000;
  --world-ink: #000000;
  --world-model: #ffffff;
  --world-model-edge: #000000;
  /* Geometry: white faces, black 3 px edges, no shading; painted faces keep their letter, on white. */
  --solid-face-light: #ffffff;
  --solid-face-mid: #ffffff;
  --solid-face-dark: #ffffff;
  --solid-face-inside: #d4d4d4;
  --solid-edge: #000000;
  --solid-edge-width: 3px;
  --solid-floor: #ffffff;
  --solid-grid: #767676;
  --solid-glass: rgba(0, 0, 0, .04);
  --solid-glass-edge: #000000;
  --solid-water: #8c8c8c;
  --solid-cut: #b00020;
  --solid-select: #0033cc;
  --solid-paint-a: #ffffff;
  --solid-paint-b: #ffffff;
  --solid-paint-c: #ffffff;
  --solid-paint-d: #ffffff;
  --solid-paint-e: #ffffff;
  --solid-paint-f: #ffffff;
  --solid-paint-ink: #000000;
  --shape-fill: #ffffff;
  --shape-edge: #000000;
  --shape-dot: #000000;
  --shape-label: #000000;
  --atolye-tekrar: #ffffff;
  --atolye-tekrar-ink: #000000;
  --atolye-kesif: #ffffff;
  --atolye-kesif-ink: #000000;
  color: #000000;
  background: #ffffff;
}

/* Deliberate theme switches fade colours instead of flashing (theme-init.js adds the class for ~0.4s). */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}