/* =====================================================
   OnsBord — design-tokens voor de site
   Kleurwereld B (Petrol & Zand) · Literata × Atkinson Hyperlegible
   Overgezet 9-9-2026 uit 01_huisstijl/kleuren-fonts/tokens.css.

   DE REGEL: staat er een hexcode in een template of in site.css, dan is dat
   een fout. Alles komt hiervandaan. Ontbreekt er een token, voeg hem hier toe
   — en werk 01_huisstijl/kleuren-fonts/tokens.json mee bij.

   ⚠️ VERSCHIL MET DE HUISSTIJLMAP: alleen de @font-face-paden. Daar staat
   tokens.css náást de fontmap (`fonts/…`), hier in static/css/ (`../fonts/…`).
   Verder horen de twee bestanden gelijk te blijven.

   Wat er bij de overzetting is gebeurd, en waarom:

   1. De oude namen (--color-anthracite, --color-orange, --font-mono …) zijn
      mechanisch hernoemd naar --ob-*. Ze waren kleurgebonden in plaats van
      rolgebonden, en dat is precies waarom een rebrand pijn deed. Nu staat er
      wat iets DOET, niet welke kleur het toevallig heeft.
   2. Er is geen mono meer. De labels die JetBrains Mono gebruikten staan nu in
      Atkinson bold, uppercase, met wijde letterspatiëring.
   3. Er is geen accentkleur meer. Petrol is structuur én actie. Waar oranje
      stond als CTA staat nu petrol; waar oranje als decoratief vlak stond, is
      het meestal weggehaald.
   ===================================================== */

/* --- Lettertypes: lokaal, OFL 1.1. Bewust geen Google Fonts: dat kost
       laadtijd en stuurt bezoeker-IP's naar Google (AVG). ------------------ */
@font-face {
  font-family: 'Literata';
  src: url("../fonts/Literata[opsz,wght].9b1571871248.ttf") format('truetype-variations');
  font-weight: 200 900; font-stretch: 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url("../fonts/Literata-Italic[opsz,wght].ab155f39f105.ttf") format('truetype-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/AtkinsonHyperlegible-Regular.43b63ccfb94f.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/AtkinsonHyperlegible-Bold.4de508efffb2.ttf") format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/AtkinsonHyperlegible-Italic.ff0476db45c8.ttf") format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("../fonts/AtkinsonHyperlegible-BoldItalic.aafcf2dcfa6e.ttf") format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Kleur ----------
     Petrol is structuur én actie. Er is bewust geen aparte accentkleur: wat
     opvalt, valt op omdat het het enige gekleurde ding op het scherm is. */
  --ob-petrol:        #1F4F4C;
  --ob-petrol-diep:   #153937;   /* hover / active */
  --ob-tekst:         #22403E;   /* lopende tekst — 9,21:1 op zand */
  --ob-gedempt:       #56645F;   /* meta, subtekst — 5,09:1 op zand */

  --ob-zand:          #EFE8DA;   /* pagina */
  --ob-ecru:          #F8F4EC;   /* kaart, paneel, én tekst op donker */
  --ob-mist:          #DDE5E0;   /* tint: badge, hover op secundaire knop */
  --ob-wit:           #FFFFFF;   /* alleen waar een kaart écht wit moet zijn */

  --ob-lijn:          #D9D0BF;   /* DECORATIEF — 1,26:1 */
  --ob-lijn-sterk:    #C9BFA9;   /* zwaardere scheiding, nog steeds decoratief */
  --ob-veldlijn:      #7C8B85;   /* bediening — 3,25:1 op ecru. WCAG 1.4.11
                                    eist 3:1 voor de begrenzing van een
                                    bedienbaar element; --ob-lijn haalt dat
                                    niet en mag daar dus nooit voor dienen. */

  --ob-op-donker:         #F8F4EC;  /* 8,39:1 op petrol */
  --ob-op-donker-gedempt: #BFD0CB;  /* 5,74:1 op petrol */

  /* Statuskleuren. Vijf uitkomsten, altijd mét het woord erbij — kleur is
     nooit de enige drager. Ratio's tegen hun eigen achtergrond. */
  --ob-past:          #3B6E52;  --ob-past-bg:        #E2ECE4;  /* 4,90:1 */
  --ob-aanpassing:    #865E19;  --ob-aanpassing-bg:  #F1E8D2;  /* 4,74:1 */
  --ob-niet:          #9A3C2C;  --ob-niet-bg:        #F2E0DB;  /* 5,39:1 */
  --ob-onbekend:      #55605C;  --ob-onbekend-bg:    #E6E4DC;  /* 5,13:1 */

  /* ---------- Typografie ---------- */
  --ob-font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --ob-font-body:    'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Atkinson Hyperlegible bestaat alleen in 400 en 700. Vraag nooit 500 of 600
     op: de browser maakt er dan zelf een nepvet van. */
  --ob-gewicht-body:    400;
  --ob-gewicht-vet:     700;
  --ob-gewicht-display: 500;

  --ob-maat-display: clamp(40px, 6vw, 72px);
  --ob-maat-h1:      clamp(34px, 5vw, 56px);
  --ob-maat-h2:      clamp(26px, 3.2vw, 36px);
  --ob-maat-h3:      21px;
  --ob-maat-lead:    19px;
  --ob-maat-stap:    17px;   /* bereidingsstap — leesbaar op keukenafstand */
  --ob-maat-body:    16px;
  --ob-maat-klein:   15px;
  --ob-maat-meta:    13px;
  --ob-maat-label:   12.5px;

  --ob-lh-kop:       1.08;
  --ob-lh-kop-klein: 1.2;
  --ob-lh-body:      1.55;
  --ob-lh-lead:      1.45;

  --ob-spatie-kop:   -0.01em;
  --ob-spatie-normaal: 0;
  --ob-spatie-label: 0.06em;
  --ob-spatie-caps:  0.1em;

  /* ---------- Ruimte (4px-raster) ---------- */
  --ob-ruimte-1: 4px;   --ob-ruimte-2:  8px;   --ob-ruimte-3: 12px;
  --ob-ruimte-4: 16px;  --ob-ruimte-5: 22px;   --ob-ruimte-6: 28px;
  --ob-ruimte-7: 40px;  --ob-ruimte-8: 56px;   --ob-ruimte-9: 80px;
  --ob-ruimte-10: 96px;

  /* ---------- Vorm ---------- */
  --ob-radius-ui:    6px;   /* knoppen, velden — de ene bescheiden afronding */
  --ob-radius-kaart: 4px;
  --ob-radius-label: 3px;
  --ob-radius-rond:  50%;

  --ob-rand-haar:        1px;
  --ob-rand-veld:        1.5px;
  --ob-rand-nadruk:      2px;
  --ob-rand-afsplitsing: 2px;  /* de lijn die het afsplitsmoment markeert */

  /* Vrijwel geen schaduw: diepte komt van kleurvlakken en witruimte. */
  --ob-schaduw-geen:  none;
  --ob-schaduw-zacht: 0 1px 2px rgba(31, 79, 76, .08);

  /* ---------- Beweging ---------- */
  --ob-duur-snel:    120ms;
  --ob-duur-normaal: 200ms;
  --ob-curve:        cubic-bezier(.2, 0, .2, 1);

  /* ---------- Focus ----------
     Eén zichtbare ring voor het hele systeem. Nooit outline:none zonder
     vervanging. Petrol op zand haalt 7,55:1. */
  --ob-focus-kleur:   var(--ob-petrol);
  --ob-focus-dikte:   3px;
  --ob-focus-afstand: 3px;
  --ob-focus-ring:    0 0 0 2px var(--ob-zand), 0 0 0 4px var(--ob-petrol);

  /* ---------- Personen ----------
     Eén tint per gezinslid, voor de monogrammen. Vier identiek grijze rondjes
     lezen als een placeholder in plaats van als ontwerp.

     Bewust NIET de statuskleuren: die betekenen "past", "let op" en "past
     niet". Een persoon een groen rondje geven zou suggereren dat er iets met
     hém in orde is. Alle zes halen ten minste 4,5:1 met ecru erop. */
  --ob-persoon-1: #2F6156;   /* dennengroen */
  --ob-persoon-2: #7A4B6B;   /* pruim       */
  --ob-persoon-3: #3D5A80;   /* diepblauw   */
  --ob-persoon-4: #8A5A2B;   /* kaneel      */
  --ob-persoon-5: #4A4A6A;   /* leisteen    */
  --ob-persoon-6: #6B4A2E;   /* noot        */
}

/* Wie geen animatie wil, krijgt er geen. */
@media (prefers-reduced-motion: reduce) {
  :root { --ob-duur-snel: 0ms; --ob-duur-normaal: 0ms; }
}