/* =========================================================
   TSCB UTILITY-SYSTEEM — child theme
   Versie: 1.0.2 — 2026-07-16
   Verdeeld over meerdere bestanden (zie functions.php voor
   de laadvolgorde). Dit bestand (kleur.css) laadt als eerste
   en levert de kleur-bridge waar alle andere tscb-bestanden
   van afhangen.
   Un-layered laten (nooit in @layer bricks wikkelen), dan
   winnen deze classes van Bricks-defaults zonder !important.
   Hergebruik: alleen tokens/bridge/custom slots per project
   aanpassen — bron: tscb-utility-classesv1.md.
   ========================================================= */

:root {
  /* -------------------------------------------------------
     COLOR BRIDGE — koppeling met de Bricks Color Manager.
     Greys = standaard Bricks-palet (--bricks-color-grey-*).
     White/black voeg je toe in de Color Manager.
     Merkkleuren: maak per project primary1..3, secondary1..3
     en tertiary1..3 aan (3 kleuren, elk 3 tinten:
     1 = licht, 2 = medium, 3 = donker).
     Fallbacks houden alles werkend als een kleur nog niet
     bestaat.
     ------------------------------------------------------- */
  /* neutralen — standaard Bricks greys + eigen white/black */
  --tscb_grey_100: var(--bricks-color-grey-100, #f5f5f5);
  --tscb_grey_300: var(--bricks-color-grey-300, #e0e0e0);
  --tscb_grey_500: var(--bricks-color-grey-500, #9e9e9e);
  --tscb_grey_700: var(--bricks-color-grey-700, #616161);
  --tscb_grey_800: var(--bricks-color-grey-800, #424242);
  --tscb_grey_900: var(--bricks-color-grey-900, #212121);
  --tscb_white:    var(--white, #ffffff);
  --tscb_black:    var(--black, #000000);

  /* merkkleuren — 3 kleuren × 3 tinten uit de Color Manager */
  --tscb_primary_1:   var(--primary1, #6d8fc7);   /* licht  */
  --tscb_primary_2:   var(--primary2, #1e3c78);   /* medium */
  --tscb_primary_3:   var(--primary3, #12244a);   /* donker */
  --tscb_secondary_1: var(--secondary1, #8fb6cf);
  --tscb_secondary_2: var(--secondary2, #4a7c9b);
  --tscb_secondary_3: var(--secondary3, #2c4a5d);
  --tscb_tertiary_1:  var(--tertiary1, #d9c48f);
  --tscb_tertiary_2:  var(--tertiary2, #b3924a);
  --tscb_tertiary_3:  var(--tertiary3, #6b5729);

  /* De paginakleur. Gebroken wit en geen zuiver #fff: een spoor
     warmte haalt de hardheid van wit weg zonder dat je het als
     kleur benoemt. Merkbaar naast de koele merkkleuren, die er
     juist scherper door worden. */
  --tscb_paginakleur: #fef6f4;

  /* De koptekstkleur. Diep aubergine en geen zwart: donker genoeg
     om te dragen, maar met dezelfde koele kant als de merkkleuren,
     zodat koppen bij het palet horen in plaats van als los zwart
     blok op de warme paginakleur te vallen. Gelijk aan #1c0536.
     Niets staat op deze volle waarde: de koppen mengen hem
     hieronder in twee stappen met wit. */
  --tscb_kopkleur: color(srgb 0.11 0.02 0.21);

  /* Dezelfde kopkleur, een tikje lichter: de waarde waar h2-h6 op
     staan. Als token en niet als losse color-mix op elke plek,
     omdat ook de naam onder de h1 op pages/home.css hem uitleest
     en de twee anders uit elkaar zouden lopen. */
  --tscb_kopkleur_zacht: color-mix(in srgb, var(--tscb_kopkleur) 88%, var(--tscb_white));

  /* Nog een stap lichter: de h1. Op de grootste letter van de pagina
     hoeft het gewicht niet ook nog uit de kleur te komen.
     Gemengd vanuit _zacht en niet vanuit de volle kopkleur, met
     hetzelfde percentage: zo is de afstand h1 -> h2 precies even
     groot als h2 -> de basiskleur, en blijft dat kloppen als je aan
     die 88% draait. */
  --tscb_kopkleur_licht: color-mix(in srgb, var(--tscb_kopkleur_zacht) 88%, var(--tscb_white));

  /* Verlopen die als merkkleur gelden en dus vroeg beschikbaar
     moeten zijn: onderdelen/gradient.css zet ze op een utility-
     class, layout/header.css gebruikt dezelfde waarde rechtstreeks
     op de <header>. Beide lezen hem hier. */
  /* Binnenste stop van de warme randverlopen (header, formulier, blokken):
     zacht wit i.p.v. het oude olijfgeel. Eén knop voor de hele site. */
  --tscb_grad_rand_zacht: rgb(255 255 255 / 40%);

  --tscb_grad_warm_header_ipm:
    linear-gradient(180deg, transparent 40%, var(--tscb_grad_rand_zacht) 85%,
                    rgb(165 89 89 / 21%) 98%, rgb(135 137 157 / 34%) 99%);

  /* Kleurrollen die de groepen hieronder gebruiken */
  --tscb_shadow_color: var(--tscb_grey_900);

  /* Gradient-squeeze — corrigeert uitrekking van kleurstops
     bij de rand in hogere secties. 1 = basis (kleine sectie).
     De maat-subclasses _mg/_lg/_xlg verkleinen deze factor. */
  --tscb_grad_squeeze: 1;

  /* Schaduw-sterkteknop — 0 (onzichtbaar) tot 100 (vol).
     Overal te overriden: :root, een sectie, of via sub class. */
  --tscb_shadow_strength: 100;
}

/* ---------------------------------------------------------
   0. VRIJE SUB CLASSES — bewust leeg, per project invullen.
   Werken op ELKE groep: ze zetten override-variabelen die
   alle groepen eerst uitlezen. Combineren: "tscb_gap_m tscb_sub_1".
   --------------------------------------------------------- */
/* .tscb_sub_1 {
  /* voorbeelden — activeer/pas aan wat je nodig hebt:
  --_tscb_section: 8rem;                          overridet elke tscb_section_*
  --_tscb_gap: 2rem;                              overridet elke tscb_gap_*
  --_tscb_text: 1.25rem;                          overridet elke tscb_text_*
  --_tscb_leading: 1.3;                           overridet line-height
  --tscb_shadow_strength: 50;                     halveert schaduw-intensiteit
  --tscb_shadow_color: var(--tscb_primary_3);     schaduwen in merkkleur
  --tscb_grad_squeeze: .4;                        eigen squeeze-waarde (tussenmaat)

} */
/* .tscb_sub_2 {
} */