/* TSPSB — ontwerptokens (REGIE.md §2.1 en §2.3). Elke kleur op de site komt uit dit bestand. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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 {
  /* het palet, letterlijk */
  --dark: #1f1a17;   /* oklch(0.2225 0.0098 52.96) */
  --cream: #efe7dc;  /* oklch(0.9312 0.0171 76.11) */
  --red: #e2231a;    /* oklch(0.5855 0.2231 29.08) — alleen de CTA-knoppen en de kabel */

  /* afgeleiden via oklch (formules uit de mockup, absoluut uitgeschreven) */
  --on-dark: var(--cream);
  --on-cream: var(--dark);
  --dark-2: oklch(0.2825 0.0098 52.96);      /* donker + 0.06 L: vlak achter een foto die laadt */
  --on-dark-2: oklch(0.74 0.02 76.11);       /* crème gedempt: lopende tekst op donker */
  --ink-2: oklch(0.46 0.02 52.96);           /* donker opgelicht: tweede tekstkleur op zand */
  --line-cream: oklch(0.8312 0.0171 76.11);  /* zand − 0.1 L: haarlijn op zand */
  --line-dark: oklch(0.3225 0.0098 52.96);   /* donker + 0.1 L: haarlijn op donker */
  --red-press: oklch(0.5255 0.2231 29.08);   /* kabelrood − 0.06 L: knop ingedrukt/hover */
  --on-red: oklch(1 0 76.11);                /* crème-tint op volle lichtheid: 4.6:1 op kabelrood */

  /* het stroomschema: zand gedimd richting donker (waarden uit mockup ronde 2 · D) */
  --on-dark-3: oklch(0.62 0.02 76.11);   /* zand op 0.62 L: kleine labels op donker, 4.6:1 */
  --draad: oklch(0.4 0.012 70);           /* schemalijn zonder stroom */
  --draad-aan: oklch(0.82 0.02 76.11);    /* schemalijn onder spanning */
  --goot: oklch(0.36 0.012 60);           /* route van de kabel vóór de stroom er is */

  --font-head: "Familjen Grotesk", "Hanken Grotesk", sans-serif;
  --font-body: "Hanken Grotesk", sans-serif;

  --pad: 72px;
}

@media (max-width: 1200px) {
  :root {
    --pad: 48px;
  }
}

@media (max-width: 900px) {
  :root {
    --pad: 20px;
  }
}