/* ============================================================
   Coachgevraagd — design tokens
   Drie lagen: primitieven → semantisch → component.
   Contract: portfolio-strategy/brand/00-design-systeem-contract.md
   North Star: "Het werkblad, warm uitgevoerd" (DESIGN.md §1).

   Elke kleurwaarde hieronder is doorgerekend tegen WCAG AA vóór hij hier
   terechtkwam; de kwaliteitspoort meet het opnieuw bij elke wijziging.
   ============================================================ */

:root {
  /* ---- Laag 1: primitieven ---- */

  /* Pine — het merkregister. Diep, rustig, van het vak en niet van de sport. */
  --pine-900: #0c231c;
  --pine-800: #12362b;
  --pine-700: #1a4a3b;
  --pine-600: #22604c;
  --pine-100: #dcebe5;
  --pine-050: #f1f7f4;

  /* Clay — de actiekleur. Warm, beslist, zichtbaar zonder te schreeuwen. */
  --clay-800: #7a3410;
  --clay-700: #8f3e13;
  --clay-600: #a54916;   /* 5,69:1 op de grond · wit erop 5,89:1 */
  --clay-100: #fbe9dd;
  --clay-050: #fdf5ef;

  /* Stone — warme neutralen. Geen koel grijs: dat trekt het merk naar corporate. */
  --stone-900: #1b1a17;
  --stone-700: #3d3a34;
  --stone-600: #57534a;
  --stone-500: #6e6a5f;
  --stone-300: #c9c4b8;
  --stone-200: #e2ded4;
  --stone-100: #f0ede6;
  --stone-050: #fcfbf8;
  --white: #ffffff;

  /* Status — bewust andere families dan merk en actie.
     leaf ≠ pine zodat "goed" niet als merkkleur leest;
     ochre ≠ clay zodat "let op" niet als knop leest. */
  --leaf-700: #2e6b33;
  --leaf-050: #eef6ee;
  --ochre-800: #7a5c0a;
  --ochre-050: #fbf5e3;
  --red-700: #a82921;
  --red-050: #fdefee;

  /* Type-schaal — ratio 1,20 (kleine terts). Dicht genoeg voor een werkblad,
     ruim genoeg om te lezen op een telefoon. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.2rem;
  --fs-lg: 1.44rem;
  --fs-xl: 1.728rem;
  --fs-2xl: 2.074rem;
  --fs-3xl: clamp(2.074rem, 1.6rem + 2.4vw, 2.986rem);

  /* Ruimte — 4px-basis */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;

  /* Radii — klein, want een werkblad is recht */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Elevatie — benoemd naar functie, niet naar grootte */
  --shadow-lift: 0 1px 2px rgb(27 26 23 / 0.05), 0 8px 20px -14px rgb(27 26 23 / 0.35);
  --shadow-float: 0 2px 4px rgb(27 26 23 / 0.06), 0 18px 36px -22px rgb(27 26 23 / 0.5);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;   /* beeld dat inzoomt bij hover: trager dan een knop,
                          anders leest de zoom als een schok in plaats van als aandacht */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Laag 2: semantisch ---- */
  /* Namen volgen het contract. Componenten raken UITSLUITEND deze laag. */

  --color-primary:        var(--pine-700);
  --color-primary-strong: var(--pine-800);
  --color-primary-mist:   var(--pine-100);  /* lichte tint op een merkvlak: de balken van het merkteken */

  --color-cta:            var(--clay-600);
  --color-cta-hover:      var(--clay-700);
  --color-cta-text:       var(--white);

  --surface:              var(--stone-050);
  --surface-tint:         var(--pine-050);
  --surface-raised:       var(--white);

  --text-strong:          var(--stone-900);
  --text-body:            var(--stone-700);
  --text-muted:           var(--stone-600);
  --text-on-primary:      var(--white);

  --border:               var(--stone-200);
  --ring:                 var(--clay-600);

  --accent:               var(--pine-600);
  --accent-ink:           var(--pine-900);

  --success:              var(--leaf-700);
  --error:                var(--red-700);

  /* Aanvulling op de referentie: statusvlakken hebben een wash+ink-paar nodig,
     anders staat statustekst op een gekleurd vlak zonder gegarandeerd contrast.
     Zie contract §1 laag 2 — voorstel, met deze set alvast doorgerekend. */
  --success-wash: var(--leaf-050);   --success-ink: var(--leaf-700);
  --warn-wash:    var(--ochre-050);  --warn-ink:    var(--ochre-800);
  --error-wash:   var(--red-050);    --error-ink:   var(--red-700);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Laag 3: component ---- */
  /* Spaarzaam. Elke token hier heeft een reden in DESIGN.md §5. */
  --btn-min-height: 48px;   /* raakvlak; contract §4 eist 44px minimaal */
  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --input-min-height: 48px;
}