/* ===================================================================
   LETTERTYPEN
   Zelf gehost, niet bij Google opgehaald. Twee redenen: het ip-adres van
   elke bezoeker ging anders naar een derde partij, wat niet klopt met het
   privacybeleid, en de browser moest eerst een verbinding met een ander
   domein opzetten voordat hij een letter kon tekenen.

   Het zijn variabele lettertypen: een bestand bevat alle gewichten van 100
   tot 900, dus 400, 500, 600 en 700 komen alle vier uit hetzelfde bestand.
   Per subset staat er een unicode-range bij, waardoor de browser latin-ext
   alleen ophaalt als er een teken op de pagina staat dat erin zit. Op een
   Nederlandse pagina blijft het daardoor bij twee bestanden.

   font-display: swap laat de tekst meteen zien in een systeemletter en
   wisselt zodra het bestand binnen is. Zonder die regel blijft de tekst
   onzichtbaar tot het lettertype geladen is.

   Bijwerken gaat niet vanzelf. Wil je een gewicht of een stijl erbij, haal
   dan het bestand op bij fonts.google.com en zet er een blok bij; er is geen
   build-stap die dit genereert. Ontbreekt een stijl, dan maakt de browser er
   zelf een scheve of dikkere versie van, en dat ziet er slechter uit.
   =================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================
   RINSE&GO: DESIGN TOKENS
   Merkkleur (#4217ef) gemeten uit het officiële logo.
   Zachtblauw (#afcce8) gemeten uit de productrender.
   =================================================================== */

:root {
  /* ---- Kleur: kern ---- */
  --ink: #10102A;            /* primaire tekstkleur, indigo-getint zwart */
  --ink-soft: #4B4D63;       /* secundaire tekst */
  /* Op 18 augustus 2026 donkerder gemaakt, van #83849A naar deze waarde. Het
     oude grijs haalde nergens de 4.5 die WCAG AA vraagt voor gewone tekst:
     3.48 op paper, 3.66 op wit en 3.31 op het lichte sectievlak. Deze waarde
     heeft dezelfde tint en verzadiging en haalt 4.74, 4.99 en 4.51. Maak hem
     niet lichter zonder die drie opnieuw te rekenen. */
  --ink-faint: #6C6E85;      /* tertiaire tekst / meta */

  --primary: #4217EF;        /* merk-indigo */
  --primary-dark: #2C0FBE;   /* hover / actief */

  --sky: #AFCCE8;            /* zacht accentblauw uit productrender */
  --sky-dark: #6E96C2;
  --sky-tint: #EEF4FA;       /* lichte sectie-achtergrond */

  --paper: #FAF9F6;          /* warm gebroken wit, hoofdachtergrond */
  --white: #FFFFFF;
  --line: #E4E1DA;           /* haarlijnen op paper */
  --line-soft: #EEECE6;

  --ink-invert: #FFFFFF;
  --dark-bg: #0B0A20;        /* diepe indigo-zwart, voor donkere secties */
  --dark-line: rgba(255,255,255,.14);
  --dark-text-soft: rgba(255,255,255,.68);

  --success: #1E7B4D;
  --error: #C4351A;

  /* ---- Typografie ---- */
  --font-display: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Twee families, conform de eis uit de masterbrief: Work Sans voor koppen en
     cijfers, Inter voor lopende tekst en labels. */

  /* ---- Type schaal (fluid) ---- */
  --step-eyebrow: 0.9375rem;
  --step-body: 1.0625rem;
  --step-body-lg: 1.0625rem;
  /* Koppen. De hele reeks staat ongeveer 12% onder de oorspronkelijke maat.
     Pas ze alleen als geheel aan: de onderlinge verhoudingen dragen de
     rangorde op de pagina. De vw-factor is meegeschaald, zodat elke stap zijn
     maximum nog steeds rond een schermbreedte van 1250px bereikt. */
  /* h6 zakt niet mee tot onder de lopende tekst: een kopje dat kleiner is dan
     de alinea eronder leest als een fout. Gelijk aan --step-body dus, de
     rangorde komt hier van het vette schriftbeeld. */
  --step-h6: 1.0625rem;
  --step-h5: 1.2rem;
  --step-h4: clamp(1.3rem, 1.13rem + 0.8vw, 1.75rem);
  --step-h3: clamp(1.65rem, 1.32rem + 1.4vw, 2.4rem);
  --step-h2: clamp(2rem, 1.5rem + 2.1vw, 3.05rem);
  --step-h1: clamp(2.4rem, 1.65rem + 3.15vw, 4.15rem);
  --step-display: clamp(2.85rem, 1.75rem + 4.8vw, 5.5rem);

  /* ---- Ruimte ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-pad: clamp(4rem, 3rem + 4vw, 8.5rem);
  --container-max: 1320px;
  --container-narrow: 760px;

  /* ---- Vorm ----
     Op 18 augustus 2026 ruimer gezet, van 12/18/26 naar deze waarden, omdat het
     geheel te hoekig oogde. De onderlinge verhouding is gelijk gebleven: elke
     stap is ongeveer anderhalf keer de vorige.

     De waarde loopt mee met de grootte van het vlak. Een invoerveld van 48px
     hoog krijgt sm, een kaart md, en het grote productpodium lg. Overal
     dezelfde waarde nemen maakt kleine elementen te rond en grote te scherp.

     pill is geen echte maat maar een truc: elke waarde groter dan de helft van
     de hoogte geeft een halfrond uiteinde, ongeacht hoe hoog de knop is. */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* ---- Beweging ---- */
  --ease: cubic-bezier(.25,.1,.25,1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  --shadow-sm: 0 1px 2px rgba(16,16,42,.06);
  --shadow-md: 0 8px 24px -8px rgba(16,16,42,.16);
  --shadow-lg: 0 24px 64px -16px rgba(16,16,42,.22);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}