/* Design tokens: letterlijk uit DESIGN.md §1. Niet hier wijzigen, eerst DESIGN.md. */
:root {
  /* Merkkleur: violet */
  --violet-50:  #f3f0ff;   /* zachte vlakken, hover op wit */
  --violet-100: #e7e1ff;
  --violet-200: #c3b6ff;   /* mono-labels en focusrand op donker */
  --violet-300: #9b84ff;   /* violet als tekst op donker */
  --violet:     #6D4AFF;   /* hoofdkleur */
  --violet-600: #5a37ec;   /* hover van violette knop */
  --violet-700: #4527c4;

  /* Donker: nachtpaars */
  --nacht:      #120C2B;   /* donkere blokken, hero-kaart */
  --nacht-800:  #1d1446;
  --nacht-700:  #2a2058;

  /* Accent: ijsblauw (alleen in verloop of op donker) */
  --ijs:        #38BDF8;

  /* Neutralen, licht naar violet getint */
  --ink:        #141414;   /* tekst */
  --ink-zacht:  #55565f;   /* lopende tekst tweede niveau */
  --ink-stil:   #8a8b94;   /* alleen voor tekst van 18px of groter, of decoratie */
  --lijn:       #e4e3ec;
  --chip:       #f4f3f8;   /* pil, invoerveld, lichte vlakken */
  --vlak:       #f6f5fa;   /* afwisselende sectie */
  --papier:     #ffffff;

  /* Op donker */
  --op-donker:        #ffffff;
  --op-donker-zacht:  rgba(255, 255, 255, .72);
  --op-donker-lijn:   rgba(255, 255, 255, .22);
  --glas:             rgba(255, 255, 255, .07);
  --glas-rand:        rgba(255, 255, 255, .16);
  --glas-blur:        18px;

  /* Verloop: altijd violet naar ijsblauw, nooit naar roze */
  --verloop:          linear-gradient(95deg, #6D4AFF 0%, #38BDF8 100%);   /* op wit */
  --verloop-donker:   linear-gradient(95deg, #9b84ff 0%, #38BDF8 100%);   /* op nachtpaars */

  /* Gloed (achter donkere blokken; met filter: blur(70px)) */
  --gloed-violet: radial-gradient(circle, #6D4AFF 0%, transparent 65%);   /* dekking .75 */
  --gloed-ijs:    radial-gradient(circle, #38BDF8 0%, transparent 65%);   /* dekking .45 */
  --gloed-blur:   70px;

  /* Letters (zelf gehost, woff2 in site/assets/fonts/) */
  --f-tekst: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono:  "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Letterschaal */
  --t-hero:  clamp(2.5rem, 6vw, 5rem);        /* 800, regel 1.02, spatie -.04em */
  --t-h1:    clamp(2.1rem, 4.6vw, 4rem);      /* 800, regel 1.04, spatie -.035em */
  --t-h2:    clamp(1.75rem, 3.4vw, 2.75rem);  /* 800, regel 1.08, spatie -.03em */
  --t-h3:    clamp(1.2rem, 2vw, 1.5rem);      /* 700, regel 1.2,  spatie -.02em */
  --t-lead:  1.125rem;                        /* 400, regel 1.6 */
  --t-tekst: 1rem;                            /* 400, regel 1.6 */
  --t-klein: .875rem;                         /* 500, regel 1.5 */
  --t-label: .75rem;                          /* Space Mono 400, HOOFDLETTERS, spatie .08em */
  --max-tekst: 65ch;

  /* Ruimte (stappen van 4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sectie: clamp(64px, 10vw, 128px);          /* ruimte tussen secties */
  --rand:   max(16px, 4vw);                    /* zijmarge pagina */
  --breed:  1200px;                            /* maximale inhoudsbreedte */

  /* Afronding */
  --r-xs:    8px;     /* tegeltjes, favicon-tegel */
  --r-sm:    14px;    /* invoerveld */
  --r-kaart: 22px;    /* kaart, glaskaart, fototegel */
  --r-kader: 28px;    /* grote donkere blokken */
  --r-pil:   999px;   /* knop, pil, menubalk */

  /* Schaduw */
  --sch-kaart: 0 1px 0 var(--lijn), 0 20px 50px -30px rgba(20, 20, 40, .25);
  --sch-menu:  0 10px 30px -12px rgba(18, 12, 43, .35);
  --sch-violet: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 12px 30px -10px #6D4AFF;

  /* Beweging */
  --d-snel:  150ms;   /* hover, focus */
  --d-mid:   300ms;   /* menubalk, openklappen */
  --d-traag: 700ms;   /* binnenkomen bij scrollen */
  --d-woord: 2800ms;  /* tijd per kleurwoord in de kop */
  --d-zweef: 14s;     /* gloed en zwevende tegels */
  --d-band:  40s;     /* één ronde van de techcarrousel */
  --ease-uit:    cubic-bezier(.22, 1, .36, 1);   /* standaard: snel weg, zacht landen */
  --ease-in-uit: cubic-bezier(.65, 0, .35, 1);   /* heen-en-weer, zweven */

  /* Lagen */
  --z-menu: 50;  --z-cookie: 60;
}