/*
 * bestegrasmaaier.nl - designtokens
 *
 * Richting: papierwit vlak, inkt als enige structurele donkere kleur, en
 * precies een chromatisch moment (limoen) op de plek waar een handeling
 * gevraagd wordt. Geen vervaagde schaduwen: hoogte is een harde 2px-offset
 * in inkt, of hij bestaat niet.
 *
 * Bron: docs/design-spec.md
 */

:root{
  /* --- kleur --- */
  --lime:#a3e635;          /* enige actiekleur. Alleen op knoppen en gemarkeerde getallen. */
  --lime-diep:#8fd11f;     /* rand en hover op limoenvlakken */
  --paper:#ffffff;         /* paginavlak */
  --cream:#fcfff7;         /* enige verhoging boven papier: kaarten, banden, voettekst */
  --ink:#262626;           /* tekst, randen, iconen, schaduw */
  --black:#000000;         /* alleen de zwaarste displaytekst */
  --depth:#303030;         /* donkere blokken: adviesvlak, uitgelichte knop */
  --rule:#e5e5e5;          /* haarlijnen en kaderranden */
  --muted:#525252;         /* lopende tekst onder een kop */
  --muted-2:#737373;       /* bijschrift, bron, fijne druk */
  --mint:#7ee2b8;          /* rand van de statusindicator */
  --mint-wash:#dcfff1;     /* vlak van de statusindicator */

  /* --- letter --- */
  --geist:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --t-caption:14px;   --lh-caption:1.2;
  --t-body-sm:16px;   --lh-body-sm:1.45;
  --t-body:18px;      --lh-body:1.55;
  --t-sub:20px;       --lh-sub:1.5;
  --t-h3:24px;        --lh-h3:1.18;   --ls-h3:-.02em;
  --t-h2:36px;        --lh-h2:1.14;   --ls-h2:-.018em;
  --t-h1:56px;        --lh-h1:1.08;   --ls-h1:-.022em;

  --w-regular:400; --w-medium:500; --w-semibold:600;

  /* --- ruimte --- */
  --s-4:4px;  --s-8:8px;  --s-12:12px; --s-16:16px; --s-20:20px;
  --s-24:24px; --s-32:32px; --s-40:40px; --s-56:56px; --s-64:64px; --s-80:80px;

  /* --- vorm --- */
  --r-btn:4px;      /* knoppen en invoervelden */
  --r-card:8px;     /* kaarten en tabelkaders */
  --r-pill:9999px;  /* alleen labels en statusindicatoren */

  /* --- hoogte --- */
  --sh:2px 2px 0 0 var(--ink);   /* de enige schaduw in het systeem */

  /* --- maat --- */
  --w:1200px;
  --gutter:32px;
  --sectie:80px;
}

@media (max-width:940px){
  :root{
    --t-h1:38px; --t-h2:28px; --t-h3:22px;
    --gutter:20px; --sectie:52px;
  }
}

/* Systeem houdt zich aan een lichte modus. De tokens zijn niet ontworpen
   voor omkering, dus we vragen er ook niet om. */
:root{ color-scheme:light; }