/* ==========================================================================
   Blooberr — design tokens.
   Eén plek voor kleur, ruimte, typografie en vorm. Componenten verwijzen
   uitsluitend naar deze variabelen, nooit naar losse waarden.
   ========================================================================== */

:root {
  /* --- merkkleuren -------------------------------------------------------
     Bessepaars als hoofdkleur (naar de naam Blooberr), met een warme koraal
     als accent. Contrastwaarden zijn nagemeten tegen wit; zie /stijlgids. */
  --bes-50:   #f5f1ff;
  --bes-100:  #ebe4ff;
  --bes-200:  #d7c8ff;
  /* Kleuren die ook doorschijnend worden gebruikt (gradient, schaduw) staan als
     losse kanalen genoteerd. Zo bestaat elke kleur maar één keer: zet je hier
     een andere merkkleur neer, dan volgt de achtergrond vanzelf mee. */
  --bes-400-rgb: 155 107 255;
  --bes-600-rgb: 109 58 224;
  --bes-700-rgb:  86  40 184;

  --bes-400:  rgb(var(--bes-400-rgb));
  --bes-600:  rgb(var(--bes-600-rgb));   /* primaire knop: 6.0:1 met witte tekst */
  --bes-700:  rgb(var(--bes-700-rgb));
  --bes-900:  #2e1263;

  --koraal-100: #ffe9e2;
  --koraal-500-rgb: 255 106 61;
  --koraal-500: rgb(var(--koraal-500-rgb));   /* alleen decoratief of met donkere tekst */
  --koraal-700: #c73f18;   /* 4.8:1 op wit — veilig voor tekst */

  /* --- inkt en vlakken --------------------------------------------------- */
  --ink:        #1a1424;   /* 15.8:1 op wit */
  --ink-soft:   #55506a;   /*  7.4:1 op wit */
  --ink-faint:  #6b6683;   /*  5.3:1 op wit — nog steeds AA voor kleine tekst */
  --vlak:       #ffffff;
  --vlak-zacht: #faf8ff;
  --rand:       #e7e2f2;
  --rand-sterk: #cfc7e4;

  /* --- status ------------------------------------------------------------ */
  --ok-vlak:  #e3f7ec;  --ok-ink:  #0f6b40;   /* 5.4:1 */
  --wacht-vlak: #fff2dd; --wacht-ink: #8a5300; /* 5.1:1 */

  /* --- typografie --------------------------------------------------------- */
  --font-kop: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --tekst-xs:  0.78rem;
  --tekst-sm:  0.88rem;
  --tekst-md:  1rem;
  --tekst-lg:  1.13rem;
  --tekst-xl:  1.35rem;
  --tekst-2xl: 1.75rem;
  --tekst-3xl: clamp(2rem, 5vw, 3rem);

  /* --- ruimte (4px-raster) ------------------------------------------------ */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;
  --ruimte-8: 64px;

  /* --- vorm --------------------------------------------------------------- */
  /* Bedieningselementen (input, select, knop) delen één hoogte en één
     tekstgrootte. Zonder deze afspraak groeit elk formulier zijn eigen maat.
     44px is meteen het minimum voor een comfortabel aanraakdoel. */
  --veld-h:     44px;
  --veld-h-sm:  36px;
  --veld-pad-x: 14px;
  --veld-tekst: 0.95rem;

  --rond-sm: 8px;
  --rond-md: 12px;
  --rond-lg: 18px;
  --rond-vol: 999px;

  --schaduw-1: 0 1px 2px rgba(46, 18, 99, .06), 0 1px 3px rgba(46, 18, 99, .08);
  --schaduw-2: 0 4px 12px rgba(46, 18, 99, .09);
  --schaduw-focus: 0 0 0 3px var(--bes-200);

  /* Ruimte voor vier productkaarten naast elkaar. Tekstblokken blijven
     smal door hun eigen max-width in ch, dus leesbaarheid lijdt er niet
     onder. Alleen de publieke site gebruikt deze maat. */
  --breedte: 1180px;
}