/* iPivo-huisstijl: kleuren, lettertype, ruimte en vorm.
   Bron: het iPivo design system (tokens.json). */

@font-face {
  font-family: "Gantari";
  src: url("../assets/fonts/Gantari-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gantari";
  src: url("../assets/fonts/Gantari-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --surface: #ffffff;
  --surface-subtle: #f2f2f2;
  --line: #d9d9d9;
  --ink: #0d0d0d;
  --ink-muted: #5e5e5e;
  --on-ink: #ffffff;
  --accent: #0f6b75;
  --accent-strong: #0a4a51;
  --accent-soft: #e3eff0;
  --on-accent: #ffffff;

  --font-sans: "Gantari", "Segoe UI", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-none: 0px;
  --radius-full: 9999px;

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Wordt door tijd.js gezet uit de URL (?speed=2). Deelt alle overgangen. */
  --snelheid: 1;
  --overgang: calc(220ms / var(--snelheid));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --surface: #0d0d0d;
    --surface-subtle: #1a1a1a;
    --line: #333333;
    --ink: #f2f2f2;
    --ink-muted: #a3a3a3;
    --on-ink: #0d0d0d;
    --accent: #5fb0b8;
    --accent-strong: #9fd3d8;
    --accent-soft: #10373c;
    --on-accent: #0d0d0d;
  }
}

/* Afdrukken is altijd zwart op wit, ook als het apparaat op donker staat. */
@media print {
  :root {
    color-scheme: light;

    --surface: #ffffff;
    --surface-subtle: #f2f2f2;
    --line: #d9d9d9;
    --ink: #0d0d0d;
    --ink-muted: #5e5e5e;
    --on-ink: #ffffff;
    --accent: #0f6b75;
    --accent-strong: #0a4a51;
    --accent-soft: #e3eff0;
    --on-accent: #ffffff;
  }
}