/* Designtokens van Verzegeld, uit shared/design-tokens.json (bron: de variabelen van Verzegeld.pen).
   web/test/tokens.test.js bewaakt dat dit bestand gelijk blijft aan de gedeelde tokens. */

:root {
  --color-bg: #FAF8F5;
  --color-surface: #F1ECE4;
  --color-text: #2F2C28;
  --color-text-2: #6F6962;
  --color-text-3: #B3ACA2;
  --color-accent: #607B65;
  --color-accent-text: #54705A;
  --color-on-accent: #FFFFFF;
  --color-clay: #9B5840;
  --color-clay-fill: #A7634B;
  --color-hairline: #E7E1D8;
  --color-track: #E7E1D8;
  --color-paper: #FFFFFF;
  --color-sand-border: #E3DACD;
  --color-scrim: #CEC8BF;
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light dark;
}

/* Alleen op het scherm: papier is wit, dus afdrukken gebeurt altijd met de lichte kleuren. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1C1B19;
    --color-surface: #282623;
    --color-text: #EEE9E2;
    --color-text-2: #9D968D;
    --color-text-3: #716B64;
    --color-accent: #607B65;
    --color-accent-text: #8FAA94;
    --color-on-accent: #FFFFFF;
    --color-clay: #CF8A70;
    --color-clay-fill: #A7634B;
    --color-hairline: #34312D;
    --color-track: #2C2926;
    --color-paper: #FFFFFF;
    --color-sand-border: #3A3632;
    --color-scrim: #0E0D0C;
  }
}