/* ============================================================
   1nnov8.tv — designtokens
   Basis: Evergreen (structuur, ritme, typografie, vormen)
   Kleur: 1nnov8-identiteit (teal/oranje/navy) i.p.v. Evergreen zwart/sage
   Bron Evergreen: ../Evergreen/DESIGN.md
   Bron kleuren:  oude site stylus/parts/helpers.styl + huidige placeholder
   ============================================================ */

:root {
  /* --- Kleur: canvas en vlakken (Evergreen) --- */
  --color-canvas:      #edede2;  /* linnen — paginabodem */
  --color-card:        #fffff3;  /* bone  — kaartvlak, licht opgetild */
  --color-white:       #ffffff;

  /* --- Kleur: 1nnov8-identiteit --- */
  --color-navy:        #1e3a52;  /* koppen */
  --color-teal:        #2595ba;  /* merkkleur — te licht voor tekst, alleen als vlak */
  --color-teal-tekst:  #1a6a85;  /* links: 5,2:1 op het linnen, haalt AA */
  --color-teal-knop:   #1e7795;  /* knopvlak: witte tekst haalt daarop 5,1:1 */
  --color-teal-dark:   #1e7795;  /* hover op teal */
  --color-teal-wash:   #d7ecf3;  /* zachte wash: tags */
  --color-lampblauw:   #8ed8f8;  /* het originele lichtblauw uit het logo: lamp, streepjes */
  --color-orange:      #ff7a14;  /* accent, spaarzaam: streepje, cijfer, hover */
  --color-text:        #1a2a38;  /* lopende tekst */
  --color-muted:       #57687a;  /* bijschrift, meta — 4,9:1, haalt AA */
  --color-hairline:    rgba(30,58,82,.18);

  /* --- Typografie --- */
  /* Eén familie voor kop en tekst (besluit Eric 08-09). Space Grotesk:
     contemporaine grotesk, SIL-licentie, zelf gehost. Het onderscheid tussen
     kop en tekst komt uit gewicht en grootte, niet uit een tweede lettertype. */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-caption:        12px;  --leading-caption:        1.6;
  --text-body-sm:        17px;  --leading-body-sm:        1.9;
  --text-body:           19px;  --leading-body:           1.9;
  --text-subheading-sm:  21px;  --leading-subheading-sm:  1.7;
  --text-subheading:     23px;  --leading-subheading:     1.54;
  --text-heading-sm:     30px;  --leading-heading-sm:     1.41;
  --text-heading:        54px;  --leading-heading:        1.48;
  --text-display:        74px;  --leading-display:        1.4;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- Ruimte (Evergreen: spacious) --- */
  --space-4: 4px;   --space-10: 10px; --space-12: 12px; --space-14: 14px;
  --space-18: 18px; --space-24: 24px; --space-30: 30px; --space-36: 36px;
  --space-48: 48px; --space-60: 60px; --space-72: 72px;

  /* --- Layout --- */
  --page-max:     1200px;
  --prose-max:    620px;
  --section-gap:  120px;
  --card-padding: 20px;
  --element-gap:  14px;

  /* --- Vormen (Evergreen) --- */
  --radius-input:  7px;
  --radius-card:   10px;
  --radius-link:   30px;
  --radius-button: 40.5px;
  --radius-tag:    46px;
}

/* Compacter ritme op smalle schermen */
@media (max-width: 760px) {
  :root {
    --text-display:    38px;
    --text-heading:    30px;
    --text-heading-sm: 24px;
    --text-body:       17px;
    --section-gap:     64px;
  }
}