/*
 * De tokens van darttoernooi.app.
 *
 * Het idee achter dit ontwerp: luid buiten, stil binnen. De pagina heeft de energie
 * van een dartavond — zware letters, hoog contrast, een lopende band met uitslagen —
 * maar elk scherm van het product zelf blijft precies zo rustig als het in het echt is.
 * Dat contrast ís het argument. Wie de pagina afgaat ziet eerst het lawaai van de zaal
 * en dan een licht, stil beamerscherm dat gewoon zijn werk doet.
 *
 * Oranje is daarom van de pagina en groen van het product. Het groen is letterlijk
 * dat van de app (public/css/control.css), zodat een knop hier en een knop daar
 * dezelfde kleur hebben.
 */

:root {
  /* --- de zaal: donkere vlakken ---------------------------------------- */
  --ink: #0f172a;
  --ink-op: #131d33;
  --ink-kaart: #192134;
  --ink-diep: #0a1020;
  --lijn: rgb(255 255 255 / 10%);
  --lijn-fel: rgb(255 255 255 / 22%);

  /* --- tekst ------------------------------------------------------------ */
  --wit: #ffffff;
  --zacht: #b7c2d0;
  --grijs: #8b99ab;

  /* --- energie: van de pagina, niet van het product ---------------------- */
  --oranje: #ea580c;
  --oranje-fel: #f97316;
  /* Donker en niet wit: wit op dit oranje haalt maar 3,6:1 en dat is te weinig
     voor tekst op normale grootte. Zwart erop haalt 5,3:1. */
  --oranje-tekst: #170a01;

  /* --- het product: hetzelfde groen als de app -------------------------- */
  --groen: #37b04a;
  --groen-diep: #1c6b2b;
  --groen-tekst: #08120a;

  --rood: #dc2626;
  --amber: #e0a32e;

  /* --- de vier poulekleuren, lichte variant (group-colors.css) ---------- */
  --poule-a: #1c6b2b;
  --poule-b: #1d4f8c;
  --poule-c: #96301f;
  --poule-d: #6a3f96;

  /* --- letters ---------------------------------------------------------- */
  --kop: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --tekst: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- maten: 4/8-ritme ------------------------------------------------- */
  --r1: 0.25rem;
  --r2: 0.5rem;
  --r3: 0.75rem;
  --r4: 1rem;
  --r6: 1.5rem;
  --r8: 2rem;
  --r12: 3rem;
  --r16: 4rem;
  --r24: 6rem;

  /* --- vlakken ---------------------------------------------------------- */
  --rond: 4px;
  --rond-groot: 8px;
  --breed: min(1200px, 100% - 2.5rem);
  --smal: min(760px, 100% - 2.5rem);

  /* --- beweging --------------------------------------------------------- */
  --snel: 140ms;
  --normaal: 220ms;
  --boog: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- lagen ------------------------------------------------------------ */
  --laag-nav: 100;
  --laag-menu: 200;
}

/*
 * Het lichte scherm. Dit zijn de tokens van de beamer uit public/css/beamer.css,
 * en ze gelden alleen binnen .scherm — nergens anders op de site. Zo blijft het
 * product op elke pagina zichzelf, ongeacht wat eromheen gebeurt.
 */
.scherm {
  --s-bg: #f4f1ea;
  --s-vlak: #ffffff;
  --s-vlak-op: #e8e3d8;
  --s-lijn: #c8c1b2;
  --s-tekst: #14110c;
  --s-tekst-zacht: #55503f;
  --s-door: #d6ecd6;
}