/*
 * Letterlijn — ontwerp-tokens. Alle kleuren, maten, schaduwen en tijden van het spel staan
 * hier, als benoemde variabelen. Geen andere stylesheet en geen tekening noemt een hexcode;
 * de canvaslagen lezen hun kleuren ook hier vandaan (getComputedStyle).
 *
 * Eigen, kleine set (bouwplan v1 §4.1): GL-003 is het PostNL-werkontwerp en geldt hier niet.
 *
 * Thema (afstelronde 2026-10-01, "een spel uit 2026"): schemering boven de heuvels. Violette
 * lucht die naar een oranje horizon loopt, glazen panelen, warme houten tegels, een rode
 * stoomlocomotief tegen een zilveren computertrein. Contrasten gemeten in de browser
 * (tests/frontend/e2e-browser.mjs, controle "contrast").
 */
:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- lucht en land */
  --lucht-1: #120b33;
  --lucht-2: #33195f;
  --lucht-3: #7a327a;
  --lucht-4: #f07a5a;
  --lucht-gloed: #ffc27a;
  --ster: #fff6d8;
  --maan: #fff1c4;
  --berg-ver: #4b2a74;
  --berg-midden: #34195a;
  --berg-dichtbij: #221142;
  --boom: #180b31;
  --grond: #120a28;
  --grind: #2a1d4a;
  --biels: #4a3325;
  --rail: #b9b3cc;
  --rail-glans: #efeaff;

  /* ---------------------------------------------------------------- dagverloop in de scène
     Vier momenten; app/ui/dag.js mengt ze met de voortgang van de computer. */
  --ochtend-lucht-1: #3f5ba3;
  --ochtend-lucht-2: #7d9fd8;
  --ochtend-lucht-3: #f0b3a3;
  --ochtend-lucht-4: #ffd39a;
  --ochtend-berg-ver: #7c86b9;
  --ochtend-berg-midden: #56679f;
  --ochtend-berg-dichtbij: #3d4a7e;
  --ochtend-boom: #2c3664;
  --ochtend-grind: #4a4468;
  --ochtend-grond: #2e2a48;
  --ochtend-wolk: #fff1e6;
  --ochtend-helder: 0.97;
  --ochtend-tint: #ffeadb;

  --middag-lucht-1: #2c79d4;
  --middag-lucht-2: #5aa4ea;
  --middag-lucht-3: #9ccff4;
  --middag-lucht-4: #d7f0ff;
  --middag-berg-ver: #7aa6cc;
  --middag-berg-midden: #4f9a6a;
  --middag-berg-dichtbij: #3a7a4c;
  --middag-boom: #24583a;
  --middag-grind: #5e566e;
  --middag-grond: #3c3650;
  --middag-wolk: #ffffff;
  --middag-helder: 1.04;
  --middag-tint: #ffffff;

  --avond-lucht-1: #2a1a5e;
  --avond-lucht-2: #74307a;
  --avond-lucht-3: #dc5c5a;
  --avond-lucht-4: #ffae5c;
  --avond-berg-ver: #5a3070;
  --avond-berg-midden: #3e1f5a;
  --avond-berg-dichtbij: #2a1446;
  --avond-boom: #1c0d36;
  --avond-grind: #3a2850;
  --avond-grond: #221638;
  --avond-wolk: #ff9a8a;
  --avond-helder: 0.95;
  --avond-tint: #ffdcc8;

  --nacht-lucht-1: #05051a;
  --nacht-lucht-2: #0e0a2e;
  --nacht-lucht-3: #1e1548;
  --nacht-lucht-4: #33275f;
  --nacht-berg-ver: #251844;
  --nacht-berg-midden: #181033;
  --nacht-berg-dichtbij: #100a25;
  --nacht-boom: #0a061c;
  --nacht-grind: #1a1330;
  --nacht-grond: #0d0a1e;
  --nacht-wolk: #2e2660;
  --nacht-helder: 0.84;
  --nacht-tint: #d6dbf8;

  /* Dagkleuring van de 3D-beelden (één neutrale render; tools/blender/ASSETS.md §3.3): elke kleur
     × tint × helderheid. Buiten de scène (beginscherm, schemer) geldt --tint. Gekozen zodat het
     messing van de locs in elk dagdeel 3:1 haalt tegen de grind (avond 5,8:1, nacht 5,5:1).
     Avond en nacht zijn na Vera's poort (M1) lichter gemaakt: de 3D-locs moeten zich minstens zo goed
     aftekenen als de oude SVG-locs; tests/frontend/e2e-browser.mjs (2e) meet dat tegen het origineel. */
  --tint: #f0dcee;

  /* Dagkleuring van de rekwisieten (bomen, watertoren, seinpaal; ASSETS.md §10.3): een eigen,
     donkerdere matrix (#dagtint-achter). Ze horen bij de achtergrond, dus ze volgen het verloop van
     grond en heuvels, niet dat van de locs: 's nachts ±35% van de middag in plaats van ±70% (Vera
     M1, ronde 2: grond en lucht zakken naar ±28%). Iets minder verzadigd dan de locs (matter).
     De locs houden hun eigen, lichtere #dagtint. */
  --ochtend-achter-tint: #ffe6d8;
  --ochtend-achter-helder: 0.8;
  --middag-achter-tint: #ffffff;
  --middag-achter-helder: 0.96;
  --avond-achter-tint: #f0c8d8;
  --avond-achter-helder: 0.62;
  --nacht-achter-tint: #b8c0f0;
  --nacht-achter-helder: 0.42;
  --achter-verzadiging: 0.8;

  --zon-laag: #ff9f4a;
  --zon-hoog: #fff4c8;
  --raam-dag: #5c7aa6;
  --lamp-uit: #6b6070;
  --wolk: #a24d86;

  /* ---------------------------------------------------------------- vlakken */
  --kleur-achtergrond: #0f0a24;
  --kleur-vlak: #1f1648;
  --kleur-vlak-hoog: #2e2166;
  --paneel: rgb(31 22 72 / 0.9);
  --paneel-hoog: rgb(49 35 102 / 0.92);
  --paneel-rand: rgb(255 255 255 / 0.14);
  --paneel-glans: rgb(255 255 255 / 0.07);
  --kleur-rand: #8c7fc0;
  --kleur-sluier: rgb(8 4 22 / 0.72);

  /* ---------------------------------------------------------------- tekst */
  --kleur-tekst: #fbf6ff;
  --kleur-tekst-zacht: #cdc2ea;
  --kleur-tekst-op-licht: #2a1405;

  /* ---------------------------------------------------------------- betekenis */
  --kleur-jij: #ffb53d;
  --kleur-jij-2: #ff6f8e;
  --kleur-tegenstander: #56d6ff;
  --kleur-goed: #84f0ae;
  --kleur-bonus: #a9d4ff;
  --kleur-fout: #ff9aab;
  --kleur-focus: #86ecff;
  --kleur-vakje-leeg: #2a1f5c;
  --kleur-vakje-rand: #43357f;

  /* ---------------------------------------------------------------- tegels */
  --tegel-licht: #fff8e8;
  --tegel-donker: #f4d49a;
  --tegel-rand: #b97a34;
  --tegel-letter: #2a1405;
  --tegel-gebruikt: #43357a;
  --tegel-gebruikt-rand: #2c2256;
  --tegel-fout: #ff7a90;

  /* ---------------------------------------------------------------- vuur, rook, ijzer */
  --vuur-1: #fff6c2;
  --vuur-2: #ffc24a;
  --vuur-3: #ff6a1f;
  --vuur-4: #c4162f;
  --gloed: #ff8a3d;
  --rook: #d9d3ea;
  --kool: #1b1420;
  --kool-rand: #4a3942;
  --ijzer-1: #6c6582;
  --ijzer-2: #35304a;
  --ijzer-3: #1d1a2b;
  --klinknagel: #a9a2c0;

  /* ---------------------------------------------------------------- treinen en station */
  --loc-romp-glans: #f0646b;
  --loc-romp: #d23a45;
  --loc-romp-donker: #8e1f2c;
  --loc-ketel: #2a2438;
  --loc-ketel-glans: #4d4466;
  --loc-messing: #f3c04e;
  --loc-wiel: #e04a4a;
  --loc-raam: #ffe39a;
  --computer-romp-glans: #7fb0ff;
  --computer-romp: #3a6fd8;
  --computer-romp-donker: #1d3778;
  --computer-zilver: #d5dcef;
  --computer-streep: #56d6ff;
  --computer-raam: #bfe9ff;
  --computer-oog: #56d6ff;
  --station-muur: #f1d8b4;
  --station-dak: #7b2a44;
  --station-perron: #4b3a6e;
  --lamp: #ffd76e;
  --meter: #f6f1e4;
  --meter-schaal: #3a3350;
  --naald: #d23a45;

  /* ---------------------------------------------------------------- typografie */
  --font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-spel: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  --font-letters: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --tekst-xs: 0.8125rem;
  --tekst-s: 0.9rem;
  --tekst-m: 1rem;
  --tekst-l: 1.25rem;
  --tekst-xl: 1.75rem;
  --tekst-xxl: 2.75rem;
  --tekst-logo: 2.1rem;
  --regel: 1.45;

  /* ---------------------------------------------------------------- ruimte */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;

  /* ---------------------------------------------------------------- maten */
  --breedte-max: 80rem;
  --tegel: clamp(2.5rem, 3.6vw, 3.6rem);
  --tegel-hoek: 0.9rem;
  --tegel-dikte: 6px;
  --vak: 2.6rem;
  /* Ronde 2 (Arjen: "Groter maken"): hogere scène en grotere treinen, tools/blender/ASSETS.md §10.1. */
  --scene-hoogte: clamp(200px, 34vh, 380px);
  /* Treinen in de scène: hoogte als deel van de scènehoogte (cqb), breedte volgt uit het beeld.
     De verhoudingen zet app/ui/beeld.js uit het manifest; dit zijn alleen de terugvalwaarden. */
  --trein-jij: calc(34cqb * var(--loc-jij-verhouding, 2.1));
  --trein-tegen: calc(24cqb * var(--loc-computer-verhouding, 2.43));
  /* Station op 25° (ronde 2c): canvas 488 × 480 in plaats van 420 × 578, bij dezelfde ppu. ×1,162
     houdt het gebouw even groot als op 0° (was clamp(110px, 15vw, 210px)). */
  --station-breedte: clamp(128px, 17.43vw, 244px);
  --ketel-breedte: clamp(12rem, 22vw, 20rem);
  --meter-hoogte: 0.7rem;
  --rand-dik: 2px;
  --focus-dik: 3px;
  --hoek-s: 0.5rem;
  --hoek-m: 0.9rem;
  --hoek-l: 1.5rem;
  --hoek-rond: 999px;

  /* ---------------------------------------------------------------- schaduw en licht */
  --schaduw-paneel: 0 24px 48px rgb(0 0 0 / 0.45), inset 0 1px 0 var(--paneel-glans);
  --schaduw-tegel: 0 var(--tegel-dikte) 0 var(--tegel-rand), 0 12px 20px rgb(0 0 0 / 0.4);
  --schaduw-knop: 0 4px 0 rgb(0 0 0 / 0.35), 0 10px 20px rgb(0 0 0 / 0.3);
  --gloed-jij: 0 0 24px rgb(255 181 61 / 0.55);
  --gloed-tegen: 0 0 24px rgb(86 214 255 / 0.5);

  /* ---------------------------------------------------------------- tijd */
  --duur-kort: 140ms;
  --duur-schud: 360ms;
  --duur-rijden: 600ms;
  --duur-vlucht: 620ms;
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --zacht-uit: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 40rem) {
  :root {
    --tegel: min(2.7rem, calc((100vw - 6.5rem) / 7));
    --tegel-dikte: 4px;
    --tekst-xxl: 2rem;
    --tekst-logo: 1.6rem;
    --ketel-breedte: 9rem;
    --scene-hoogte: 220px;
  }
}