/* ==========================================================================
   tokens.css — het enige bestand waar kleuren, letters en maten staan.
   Verander hier iets en de hele site verandert mee.
   ========================================================================== */

/* --- Lettertypen ---------------------------------------------------------
   Zelf gehost. De site doet geen enkel verzoek naar Google of een andere
   partij, dus er valt op dit punt niets uit te leggen in de privacyverklaring.
   Beide zijn variabele fonts: één bestand voor alle diktes van 300 tot 900.  */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Kleuren -----------------------------------------------------------
     Elke kleur heeft één rol. Zonder die rollen wordt het bij de derde
     pagina een zooitje.                                                    */

  --c-ink:          #3F1C3F;  /* aubergine — koppen en lopende tekst        */
  --c-ink-inverse:  #FFFFFF;  /* tekst op donkere vlakken                   */
  --c-muted:        #5A6567;  /* bijschriften — koel grijs, geen neutraal.
                                 Donker genoeg voor 4,5:1 op wit, mist, ijs,
                                 blush en lila; lichter haalde die norm niet. */

  --c-petrol:       #0C6D82;  /* knoppen, links, actieve staat              */
  --c-petrol-dark:  #08505F;  /* zweven en indrukken                        */

  --c-ice:          #CEE3E4;  /* vlakken, labels, kaartachtergronden        */
  --c-mist:         #F2F9F9;  /* paginagrond en afwisseling tussen secties  */
  --c-white:        #FFFFFF;

  --c-coral:        #F47C74;  /* accent — markeringen en volvlakken         */
  --c-coral-ink:    #A83A33;  /* koraal als tekst, alleen zó leesbaar       */

  /* Twee lichte tinten van dezelfde twee kleuren. Geen nieuwe kleuren, maar
     ze geven een raster van zes panelen genoeg afwisseling om niet als een
     rij witte blokjes te lezen.                                            */
  --c-blush:        #FCE6E4;  /* koraal, sterk verdund                      */
  --c-lila:         #EDE7ED;  /* aubergine, sterk verdund                   */

  --c-line:         #DCE9EA;  /* randen in rust                             */
  --c-line-strong:  #C2D7D9;  /* randen die nadruk nodig hebben             */

  --c-focus:        #0C6D82;  /* toetsenbordfocus                           */

  /* --- Typografie --------------------------------------------------------
     De actieve letter staat in --font-sans. Wissel die regel om en de hele
     site wisselt mee.                                                      */

  --font-schibsted: "Schibsted Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-figtree:   "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:      var(--font-figtree);   /* gekozen op 10-09-2026 */

  /* Schaal. De twee grootste maten schalen mee met het scherm. */
  --fs-xs:    0.8125rem;  /* 13px — labels                    */
  --fs-sm:    0.9375rem;  /* 15px — bijschriften              */
  --fs-base:  1.0625rem;  /* 17px — lopende tekst             */
  --fs-lg:    1.1875rem;  /* 19px — inleidingen               */
  --fs-xl:    1.5rem;     /* 24px — tussenkoppen              */
  --fs-2xl:   1.875rem;   /* 30px — sectiekoppen klein        */
  --fs-3xl:   clamp(2rem, 1.4rem + 2.4vw, 2.75rem);      /* sectiekoppen */
  --fs-4xl:   clamp(2.375rem, 1.6rem + 3.2vw, 3.5rem);   /* de opening   */

  --lh-tight:   1.08;
  --lh-heading: 1.18;
  --lh-body:    1.65;

  --ls-tight:   -0.025em;  /* grote koppen                    */
  --ls-normal:  -0.008em;
  --ls-label:    0.14em;   /* kapitalen, zoals onder het logo */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Ruimte ------------------------------------------------------------
     Alles is een veelvoud van 4 pixels. Geen losse waarden in de opmaak.  */

  --s-1:  0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;
  --s-4:  1rem;      --s-5:  1.25rem;   --s-6:  1.5rem;
  --s-8:  2rem;      --s-10: 2.5rem;    --s-12: 3rem;
  --s-16: 4rem;      --s-20: 5rem;      --s-24: 6rem;
  --s-32: 8rem;

  /* Ruimte tussen secties: krap op een telefoon, royaal op een laptop. */
  --s-section: clamp(4rem, 2rem + 7vw, 8rem);

  /* --- Vorm --------------------------------------------------------------
     Niet overal dezelfde ronding. Dat is precies wat een pagina plat maakt. */

  --r-btn:   6px;
  --r-card:  8px;
  --r-panel: 14px;   /* de grote gekleurde vlakken en schermkaders */
  --r-pill:  999px;

  /* Schaduw alleen bij zweven. In rust dragen kaarten een randlijn. */
  --sh-hover: 0 6px 20px -6px rgb(63 28 63 / 0.16), 0 2px 6px -2px rgb(63 28 63 / 0.08);
  --sh-panel: 0 18px 48px -18px rgb(63 28 63 / 0.22);

  /* --- Breedtes ----------------------------------------------------------- */
  --w-page: 1180px;    /* de buitenmarge van de site        */
  --w-text: 34rem;     /* ± 65 tekens, de leesbare maat     */
  --w-narrow: 46rem;   /* gecentreerde inleidingen          */

  /* --- Beweging -----------------------------------------------------------
     Eén verende curve voor alles wat op zijn plek komt, één rustige voor
     kleur- en schaduwovergangen.                                          */

  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-calm:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-reveal:  500ms;
  --stagger:     60ms;

  /* --- Bizzboard ----------------------------------------------------------
     Bizzboard houdt zijn eigen huisstijl. Deze twee kleuren gebruiken we
     alleen binnen Bizzboard-schermkaders en in de chat-animatie, zodat je
     aan de kleur ziet wie er aan het woord is.                            */

  --c-bizz:        #4B3FCF;
  --c-bizz-accent: #F08A24;
}

/* De site is bewust in één lichte uitvoering ontworpen, net als de
   referentiesites. Dit zorgt dat formuliervelden en schuifbalken van de
   browser daarbij passen in plaats van donker te worden. */
:root { color-scheme: light; }