/* ============================================================
   Lijndraad — contract.css
   Merkneutrale semantische laag. Bevat GEEN --tm-, --gsa-, --hf- of
   welke merknaam dan ook.

   LAADVOLGORDE (vast, nooit omdraaien):
     1. contract.css        <- dit bestand, platte neutrale defaults
     2. brands/<merk>/tokens.css  <- overschrijft de semantische namen
     3. base.css             <- craft floor, kent geen merk
     4. components.css       <- .ui-* laag, kent geen merk
     5. motion.css

   Waarom in deze volgorde en niet andersom: CSS cascade beslist op
   bronvolgorde bij gelijke specificiteit. Zet je tokens.css na dit
   bestand, dan wint het merk. Zet je dit bestand na tokens.css, dan
   overschrijft de neutrale default per ongeluk de merkkleur. Dit is
   bewust de omgekeerde volgorde van wat een eerdere planversie schetste.

   Elk brands/<slug>/tokens.css definieert onderaan zijn eigen bestand
   een mappingblok dat een subset van deze namen overschrijft, bv.:
     :root { --bg: var(--gsa-donkerblauw); --radius-corners-md: 0 var(--radius-md) 0 0; }
   Bron: gepromoveerd uit topmatch-frontend-design/tokens.css regel 31-124,
   dat exact deze semantische laag al had. Niet opnieuw verzonnen.
   ============================================================ */

:root {
  /* Achtergrond / voorgrond, neutrale defaults */
  --bg:              #FFFFFF;
  --bg-soft:         #F4F4F4;
  --bg-invert:       #111111;
  --bg-accent:       #666666;

  --fg:              #111111;
  --fg-muted:        rgba(17, 17, 17, 0.70);
  --fg-subtle:       rgba(17, 17, 17, 0.55);
  --fg-invert:       #FFFFFF;
  --fg-invert-muted: rgba(255, 255, 255, 0.75);

  --border:          rgba(17, 17, 17, 0.12);
  --border-strong:   rgba(17, 17, 17, 0.32);
  --border-invert:   rgba(255, 255, 255, 0.18);

  /* Accent + status. Kleur is nooit het enige signaal (zie components.css). */
  --accent:          #3355FF;
  --accent-ink:      #FFFFFF;
  --focus-ring:      var(--accent);
  --ok:              #1A7A3C;
  --err:             #B3261E;
  --warn:            #9A6700;

  /* Typografie: fonts en scale komen normaliter uit het merk */
  --font-sans:       ui-sans-serif, system-ui, sans-serif;
  --font-display:    var(--font-sans);

  --fs-micro:        12px;
  --fs-small:        14px;
  --fs-body:         16px;
  --fs-lede:         20px;
  --fs-h4:           24px;
  --fs-h3:           32px;
  --fs-h2:           48px;
  --fs-h1:           64px;
  --fs-display:      96px;

  --lh-tight:        1.05;
  --lh-snug:         1.15;
  --lh-body:         1.5;
  --lh-loose:        1.65;

  /* Ruimte: 4px basis. Structureel, merken overschrijven dit zelden. */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         24px;
  --space-6:         32px;
  --space-7:         48px;
  --space-8:         64px;
  --space-9:         96px;
  --space-10:        128px;

  /* Radius-indirectie: lost de conflicterende merk-signaturen op.
     Top Match zet --radius-corners-md/lg gelijk aan --radius-md/lg (symmetrisch).
     GSA/JLG/Babcock zetten ze op "0 var(--radius-md) 0 0" (alleen rechtsboven).
     Lumina zet ze op 0. Nooit hier een merkkeuze maken. */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-pill:        999px;
  --radius-corners-md:  var(--radius-md);
  --radius-corners-lg:  var(--radius-lg);

  --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md:       0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.16);

  --ease-standard:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        360ms;

  --container-max:   1280px;
  --page-gutter:     clamp(16px, 4vw, 64px);

  color-scheme: var(--color-scheme, light);
}