/* ============================================================
   RIET QUADEN MAKELAARS — design tokens (V2)

   V2-wijzigingen t.o.v. V1, op verzoek van Riet:
   - geen spierwit meer: het fond is een zacht, warm papierwit
   - de letter is groter én zwaarder (zij las de site slecht)
   - een ritme licht-donker, zodat de pagina niet één vlak wit is
   ============================================================ */

:root {
  /* ---------- merkkleuren (uit logo; géén andere kleuren) ---------- */
  --rood: #E64449;
  --zwart: #181617;
  --wit: #FFFFFF;

  /* Rode VLAKKEN met witte tekst: dezelfde merkkleur, één tint dieper.
     Wit op --rood haalt maar 3,97:1; --rood-vlak haalt 4,82:1 en
     --rood-diep (hover) 5,24:1. --rood blijft voor lijnen en accenten. */
  --rood-vlak: #D2383D;
  --rood-diep: #C8353A;

  /* ---------- ondergrond (V2) ----------
     Drie toonniveaus. Het spel in fond.css gedraagt zich per niveau anders. */
  --papier: #F6F3EE;       /* rustig warm wit, het basisvlak van de site */
  --papier-diep: #ECE6DC;  /* een tint dieper, voor afwisselende secties  */
  --nacht: #181617;        /* merkzwart, voor de donkere secties          */
  --nacht-zacht: #211E1F;  /* een tint lichter binnen een donkere sectie  */

  /* --warmgrijs bestaat nog omdat oudere secties eraan refereren */
  --warmgrijs: #ECE6DC;
  --steungrijs: #55524F;   /* kleine labels, 7,1:1 op --papier            */
  --steun-licht: #C9C3BA;  /* kleine labels op donker, 8,3:1 op --nacht   */

  /* ---------- typografie (V2: groter en zwaarder) ---------- */
  --font-kop: 'Newsreader', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* type-scale: bewuste sprongen, clamp tussen mobiel (360px) en desktop */
  --fs-display: clamp(3.25rem, 2.5rem + 3.4vw, 5.75rem);
  --fs-h1: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  --fs-h2: clamp(2.25rem, 1.85rem + 1.7vw, 3.25rem);
  --fs-h3: clamp(1.6875rem, 1.45rem + 0.9vw, 2.125rem);
  --fs-body: 1.3125rem;    /* 21px (V1 was 17px, V2-eerste-ronde 19px) */
  --fs-body-groot: 1.4375rem;  /* 23px */
  --fs-klein: 1.0625rem;   /* 17px (V1 was 14px) */

  /* gewichten: alles één stap zwaarder dan in V1 */
  --gew-body: 480;
  --gew-body-vet: 700;
  --gew-kop: 600;
  --gew-label: 700;

  /* ---------- ritme (spacing-schaal) ---------- */
  --ruimte-3xs: 4px;
  --ruimte-2xs: 8px;
  --ruimte-xs: 12px;
  --ruimte-sm: 20px;
  --ruimte-md: 32px;
  --ruimte-lg: 48px;
  --ruimte-xl: 80px;
  --ruimte-2xl: 120px;
  --sectie-verticaal: clamp(4.5rem, 3.25rem + 5vw, 9.5rem);

  /* ---------- vorm & beweging ---------- */
  --radius: 14px;
  --schaduw: 0 1px 2px rgba(24, 22, 23, .05), 0 14px 32px -16px rgba(24, 22, 23, .18);
  --schaduw-diep: 0 2px 4px rgba(24, 22, 23, .06), 0 28px 60px -28px rgba(24, 22, 23, .32);
  --ease-luxe: cubic-bezier(.22, 1, .36, 1);

  /* ---------- chrome ---------- */
  /* scroll-offset voor ankerlinks: de gecondenseerde header (68px desktop,
     84px mobiel) plus een beetje lucht. De echte headerhoogtes staan als
     --kop-rust / --kop-compact in secties/chrome.css. */
  --header-hoogte: 96px;
}