/*
 * Design tokens, Vrijebasisschool de Zevenster
 *
 * Placeholder HEX-waarden uit §5 van briefing-claude-code.md.
 * Moenja vervangt deze waarden zodra de definitieve UI klaar is.
 */

@font-face {
  font-family: 'Waldorfschrift';
  src:
    url('../assets/fonts/Waldorfschrift-Regular.woff2?v=2') format('woff2'),
    url('../assets/fonts/Waldorfschrift-Regular.woff?v=2') format('woff'),
    url('../assets/fonts/Waldorfschrift-Regular.otf?v=2') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baar Sophia';
  src:
    url('../assets/fonts/BaarSophia-Regular.woff2') format('woff2'),
    url('../assets/fonts/BaarSophia-Regular.woff') format('woff'),
    url('../assets/fonts/BaarSophia-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Hoofdkleuren, uit het officiële Huisstijl Handboek (Moenja, Figma Page 3) === */
  --beukenblad: #f9ac5e;
  --bottelrood: #e14852;
  --ijsvogel: #8cb7dc;
  --dennegroen: #187067;
  --jong-blad: #b4d097;
  --zomerzon: #f6ce3e;

  /* === Subkleuren: lichte tinten voor achtergronden/vlakken, nooit voor tekst === */
  --abrikoos: #f1c599;
  --appelbloesem: #f7cec2;
  --sneeuwklokje: #bed8fe;
  --zeegroen: #6daba4;
  --lindegroen: #d5e7c1;
  --kamille: #f9ebbc;

  /* === Kleurpalet, "Licht & Speels" (bestaande site-tokens, blijven voor nu i.v.m. bestaande CSS) === */
  --zonnegeel: #f5c75a;
  --perzik: #f2a678;
  --mint: #9bcfb8;
  --zacht-blush: #f4c8c8;
  --zand: #e8d9b8;
  --lila-mist: #d4928e; /* zachtere variant van logo-rood, schoolwens */
  --luchtblauw: #b8d4dc;
  --zevenster-rood: #e14852; /* = Bottelrood uit het handboek; eyebrows, CTA's, accenten */
  --zevenster-rood-donker: #c2384a;
  --zevenster-teal: #038478; /* Moenja v2 accent: footer, agenda-kaart, secties */
  --zevenster-teal-donker: #02675e;
  --zevenster-oranje: #e0852a; /* menu-accent, schoolkeuze 26 juni (was rood) */

  /* === Neutralen === */
  --tekst-donker: #2c2826;
  --tekst-grijs: #6b6560;
  --tekst-licht: #9a938e;
  --achtergrond: #faf7f2;
  --achtergrond-warm: #f4efe6;
  --kader: rgba(44, 40, 38, 0.08);

  /* === Typografie === */
  /* Waldorfschrift = hand-geletterde header-font (MyFonts/Monotype, aangeschaft).
     Fraunces blijft als fallback tijdens font-load + voor systemen zonder support.
     Baar Sophia = officiële body-tekst-font uit het Huisstijl Handboek (Moenja).
     Open Sans blijft als fallback tijdens font-load + voor systemen zonder support. */
  --serif: 'Waldorfschrift', 'Fraunces', Georgia, serif;
  --sans: 'Baar Sophia', 'Open Sans', system-ui, -apple-system, sans-serif;

  /* === Spacing & layout === */
  --site-max: 1280px;
  --site-padding: 32px;
  --radius-s: 12px;
  --radius-m: 24px;
  --radius-l: 32px;

  /* === Schaduwen === */
  --schaduw-zacht: 0 12px 32px rgba(44, 40, 38, 0.08);
  --schaduw-medium: 0 20px 40px rgba(44, 40, 38, 0.08);
  --schaduw-rood: 0 16px 40px rgba(184, 74, 63, 0.25);
}