/* De ontwerpwaarden van de site: kleur, typografie, ruimte en radii.
   Wordt vóór style.css geladen, in de vier schillen én in de geprerenderde
   pagina's (zie document() in prerender.py). Wat hier staat is de bron van
   waarheid — in style.css staat geen enkele kleur- of maatwaarde meer, alleen
   var(--…). Wijzig je hier een token, dan verandert de hele site mee; tik je er
   eentje over in style.css, dan is dat de eerste plek die uit de pas gaat lopen.

   ------------------------------------------------------------------- fonts

   Zelf gehost en niet via Google Fonts: de site draait op Cloudflare Pages en
   doet nul requests naar buiten. Dat is geen smaakkwestie — één <link> naar
   fonts.googleapis.com is een derde partij die elke bezoeker van elke pagina
   ziet, en het maakt de pagina afhankelijk van een host die wij niet beheren.

   Sora en Public Sans zijn variabele fonts: één bestand per subset dekt het
   hele gewichtsbereik, dus 600 en 700 komen uit hetzelfde bestand. Space Mono
   is dat niet en heeft alleen 400 nodig.

   Per familie twee bestanden, latin en latin-ext, met de unicode-range erbij.
   Die range is geen versiering: zonder dat attribuut haalt de browser beide
   bestanden op, mét haalt hij latin-ext alleen als er een teken op de pagina
   staat dat erin zit. Voor een Nederlandstalige pricewatch is dat vrijwel
   nooit, en dan kost de tweede set niets.

   font-display: swap — de tekst staat er meteen in de terugvalletter en wisselt
   daarna. Bij `block` zou de prijstabel een halve seconde leeg blijven, en de
   prijs is precies waar de bezoeker voor komt.

   Alle drie SIL Open Font License 1.1; de licentietekst staat als OFL-*.txt
   naast de bestanden in assets/fonts/ en hoort daar te blijven — de OFL eist
   dat ze meegeleverd wordt. */

/* Sora — koppen en het woordmerk */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/sora-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;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/sora-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;
}

/* Public Sans — lopende tekst */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-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;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-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;
}

/* Space Mono — alle cijfers: prijzen, metaregels, kolomkoppen */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-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;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-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;
}

:root{
  color-scheme:light;

  /* neutrals — koel, lichte blauwe ondertoon */
  --neutral-0:#fbfcfd; --neutral-50:#f1f4f6; --neutral-100:#dfe5e9;
  --neutral-300:#bcc6cd; --neutral-500:#64717a; --neutral-700:#33403f;
  --neutral-900:#141d1f;

  /* teal — hoofdaccent: links, focus, grafieklijn, logo */
  --teal-400:oklch(72% 0.11 178); --teal-500:oklch(60% 0.10 178);
  --teal-600:oklch(48% 0.09 180); --teal-tint:oklch(96% 0.03 178);

  /* cactus — alleen positieve signalen */
  --cactus-300:oklch(85% 0.09 152); --cactus-500:oklch(58% 0.12 152);
  --cactus-600:oklch(42% 0.1 152); --cactus-tint:oklch(96% 0.03 152);

  /* bloom — uitsluitend de bloem in het logo */
  --bloom:oklch(62% 0.22 350);

  --bg:var(--neutral-0); --surface:#fff; --surface-sunken:var(--neutral-50);
  --border:var(--neutral-100); --border-strong:var(--neutral-300);
  --fg:var(--neutral-900); --fg-muted:var(--neutral-500);
  --accent:var(--teal-500); --accent-strong:var(--teal-600);
  --accent-tint:var(--teal-tint);
  --positive:var(--cactus-600); --positive-tint:var(--cactus-tint);
  --focus-ring:var(--teal-500);

  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --text-xs:0.75rem; --text-sm:0.875rem; --text-md:1rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.6;
  --tracking-tight:-0.02em; --tracking-wide:0.04em; --tracking-wider:0.08em;

  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

  --radius-sm:4px; --radius-md:6px; --radius-round:999px;
  --border-width:1px;
  --duration-fast:120ms; --ease-standard:cubic-bezier(.2,0,.2,1);
}