/*
 * 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;
}

: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, .26);
  --bg-glow-b: rgba(29, 79, 159, .14);
  --bg-glow-c: rgba(251, 191, 36, .14);
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --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: #dce3ec;
  --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;
  --brand-grad: linear-gradient(180deg, #2560b8, #1d4f9f);
  --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: soft navy shadows, as on the famolu.com panels. */
  --shadow-xs: 0 1px 2px rgba(11, 27, 51, .06);
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .05), 0 6px 16px -8px rgba(11, 27, 51, .16);
  --shadow-md: 0 2px 4px rgba(11, 27, 51, .04), 0 18px 48px -28px rgba(11, 27, 51, .42);
  --shadow-lg: 0 4px 10px rgba(11, 27, 51, .05), 0 30px 70px -32px rgba(11, 27, 51, .5);
  --shadow-pop: 0 10px 0 -6px rgba(11, 27, 51, .1);
  --shadow-brand: 0 10px 22px -10px rgba(29, 79, 159, .55);

  /* Shape, spacing, type, motion */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --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;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .14s;
  --dur: .22s;
  --dur-slow: .4s;

  /* 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);
}

/* 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, .36);
  --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);
  --on-primary: #062038;
  --primary-hover: #86ccf6;
  --brand-sheen: linear-gradient(90deg, #1d4f9f, #5cb8f2 60%, #8fd8f7);
  --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 10px 24px -10px rgba(92, 184, 242, .45);

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

/* 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;
  --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);
  --on-brand: #ffffff;
  --on-primary: #ffffff;
  --primary-hover: #082d6e;
  --wordmark-a: #000000;
  --wordmark-b: #0b3a8c;
  --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;
  --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;
  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;
}