/*
 * Huisstijl op één plek: de CORE-tokens uit core-design-system (src/tokens/tokens.css).
 * Pas hier kleuren, lettertypen en vormen aan; de rest van de app gebruikt alleen deze variabelen.
 */

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

/*
 * Record Laser (titels) is uitgeschakeld: de weblicentie is nog niet bevestigd.
 * Zodra die rond is: zet RecordLaser-Medium.woff2 in static/fonts/, voeg hier een @font-face
 * voor "Record Laser" (gewicht 500) toe en zet --font-titel hieronder op "Record Laser".
 */

:root {
  /* Basispalet [huisstijlgids] */
  --core-crème: #fff6e1;
  --core-wit: #ffffff;
  --core-zwart: #000000;
  --core-taupe: #56534e;

  /* Accenten [huisstijlgids]: zeer spaarzaam, nooit als tekstkleur op crème */
  --accent-neon: #a6ff47;
  --accent-roze: #ff88cc;
  --accent-bes: #bc4073;
  --accent-salie: #65a98f;

  /* Semantische kleuren: dit gebruikt de app */
  --kleur-achtergrond: var(--core-crème);
  --kleur-vlak: var(--core-wit);
  --kleur-tekst: var(--core-zwart);
  --kleur-tekst-zacht: var(--core-taupe);
  --kleur-lijn: rgb(0 0 0 / 0.14);
  --kleur-actie: var(--core-zwart);
  --kleur-op-actie: var(--core-crème);
  --kleur-accent: var(--accent-neon);
  --kleur-succes: var(--accent-salie);
  --kleur-fout: var(--accent-bes);

  /* Typografie [huisstijlgids]: Geist voor koppen en tekst, regelafstand 1,2, spacing -10 */
  --font-tekst: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-kop: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-titel: "Geist", ui-sans-serif, system-ui, sans-serif;
  --regelafstand: 1.2;
  --regelafstand-lopend: 1.45; /* langere teksten en formulieren lezen prettiger iets ruimer */
  --spatiering: -0.01em;
  --gewicht-kop: 600;

  --tekst-titel: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --tekst-kop-1: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --tekst-kop-2: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --tekst-kop-3: 1.25rem;
  --tekst-body: 1.0625rem;
  --tekst-klein: 0.875rem;

  /* Vormen [afgeleid uit het logo]: rond, pil-knoppen, geen schaduw in het basisthema */
  --radius: 1.75rem;
  --radius-klein: 0.875rem;
  --radius-pil: 9999px;
  --schaduw-focus: 0 0 0 3px var(--core-crème), 0 0 0 5px var(--core-zwart);
  --overgang: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --ruimte: 1rem;
  --max-breedte: 46rem;
}