/* ==============================================================
   Design tokens — prefix --ev-*
   GEGENEREERD uit tokens.json door studio/src/webstudio/emit.py.
   Wijzig dit bestand niet: pas het token aan en bouw opnieuw.
   Esther Vinju Photography — design tokens v2.0. Richting:
   donker, warm, museaal — 'Rembrandt van de
   hondenfotografie'. Kleuren gesampled uit het echte logo
   (gradient #834F2A → #DBA173) en de echte studiofoto's (warm
   near-black #0A0605–#13100B): de site krijgt letterlijk de
   achtergrond van Esthers doeken. v2.0 (migratie naar
   dmi-webstudio, 2026-07-30) maakte van deze bron een
   volwaardig tokenbestand — v1 had de typografische schaal,
   spacing, radius, gewichten en regelafstanden als leesbare
   tekst in één token staan ('0.75/0.875/1/... rem (8
   staps)'), wat voor een mens duidelijk is maar voor een
   generator onbruikbaar. Die 25 waarden bestonden alleen in
   het gegenereerde tokens.css. Migratie naar de generatoren
   (2026-07-31): wit en zwart toegevoegd als basis voor
   doorzichtige varianten, die met color-mix() uit het token
   worden afgeleid in plaats van als losse rgba-waarde
   opgeschreven.
   ============================================================== */
:root {
  /* --- Kleur: merk --- */
  --ev-color-brand-primary: #834F2A;          /* Logobruin, gesampled uit het logo. Haalt op donker géén AA — daar dus uitsluitend decoratief. Als actiekleur alleen op lichte vlakken (5,96:1 op #F7F0E7). */
  --ev-color-brand-accent: #DBA173;           /* Logogoud, uit de logo-gradient. Hoofdaccent op donker: 8,29:1 AAA op #161210; knoptekst #161210 hierop eveneens 8,29:1. */
  --ev-color-brand-accent-bright: #E7C9A6;    /* Lichter goud voor hover en gradient-einde. 11,79:1 AAA op #161210. */
  --ev-color-brand-action: #6B3F20;           /* Verdiepte AAA-actievariant van het logobruin, voor knoppen en links op lichte vlakken: 7,88:1 op #F7F0E7. */
  --ev-color-brand-action-hover: #57331A;

  /* --- Kleur: neutraal --- */
  --ev-color-wit: #FFFFFF;                    /* Zuiver wit. Komt in dit ontwerp niet als vlak voor, alleen als basis voor het rasterlijntje op donker (4,5% dekking). Bij de migratie toegevoegd: de waarde stond als rgba(255,255,255,.045) in de stijl en in geen tokenbestand. */
  --ev-color-zwart: #000000;                  /* Zuiver zwart, uitsluitend als basis voor de vignettering rond het beeld en de verduistering onder de menubalk. Nooit als tekst- of vlakkleur — daarvoor is color.surface.dark het warme bijna-zwart van dit merk. */

  /* --- Kleur: signaal --- */
  --ev-color-star: #E0A94F;                   /* Reviewsterren: 8,24:1 AAA op kaart-donker. */
  --ev-color-error: #E2836B;                  /* Formulierfout op donker: 6,82:1 AA. */
  --ev-color-focus: var(--ev-color-brand-accent); /* Focusring — verwijst naar het accent, zodat één wijziging daar overal doorwerkt. Stond in v1 als losse #DBA173 en zou dus achterlopen. */

  /* --- Signatuur --- */
  --ev-signature-gradient: linear-gradient(105deg, #834F2A 0%, #DBA173 60%, #E7C9A6 100%); /* Het signatuurelement: de logo-gradient als 'goudlicht'. Spaarzaam — één gradient-woord of -lijn per viewport. */
  --ev-signature-glow: radial-gradient(60% 50% at 68% 38%, rgba(219,161,115,.16) 0%, rgba(219,161,115,0) 70%); /* Rembrandt-gloed: warme radiale lichtval op donkere secties, zoals het strijklicht in de foto's. */
  --ev-signature-vignette: radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); /* Doek-vignet voor fotovlakken. */

  /* --- Typografie --- */
  --ev-font-head: Fraunces, Georgia, serif;   /* Museale serif met schilderkunstig karakter — draagt de Rembrandt-positionering. */
  --ev-font-body: Manrope, system-ui, sans-serif; /* Moderne, rustige sans voor lopende tekst en UI. */

  /* --- Typografie: schaal --- */
  --ev-text-xs: 0.75rem;
  --ev-text-sm: 0.875rem;
  --ev-text-base: 1rem;
  --ev-text-lg: 1.125rem;
  --ev-text-xl: 1.375rem;
  --ev-text-2xl: 1.75rem;
  --ev-text-3xl: 2.25rem;
  --ev-text-4xl: 2.75rem;
  --ev-text-5xl: clamp(2.6rem, 4.4vw, 3.5rem); /* Sectiekoppen op de redactionele pagina's. Vult het gat tussen 4xl en display, dat in v2 ontbrak waardoor sectiekoppen op 2,75rem bleven steken en de opzet vlak oogde. */
  --ev-text-display: clamp(2.6rem, 6vw, 4.5rem); /* Alleen voor de hero-kop. Vloeiend tussen 2,6 en 4,5 rem. */
  --ev-text-mega: clamp(2.8rem, 6vw, 5rem);   /* Alleen voor het ene redactionele moment per pagina: de scroll-onthulde uitspraak. Nooit twee keer in beeld. Gemeten op 1440px: 8rem gaf vijf regels van 128px die over twee schermhoogtes liepen en daardoor als kapot lazen in plaats van als groot; 5rem geeft drie regels en houdt de zin in één blik. */

  /* --- Typografie: gewicht --- */
  --ev-weight-regular: 400;
  --ev-weight-medium: 500;
  --ev-weight-semibold: 600;
  --ev-weight-bold: 700;
  --ev-weight-black: 800;

  /* --- Typografie: regelafstand --- */
  --ev-leading-tight: 1.12;                   /* Koppen — strakker dan bij de andere case, past bij de museale serif. */
  --ev-leading-normal: 1.65;

  /* --- Spacing --- */
  --ev-space-1: 4px;
  --ev-space-2: 8px;
  --ev-space-3: 12px;
  --ev-space-4: 16px;
  --ev-space-5: 24px;
  --ev-space-6: 32px;
  --ev-space-7: 48px;
  --ev-space-8: 64px;
  --ev-space-9: 96px;

  /* --- Vorm: radius --- */
  --ev-radius-sm: 4px;
  --ev-radius-md: 8px;
  --ev-radius-lg: 14px;
  --ev-radius-pill: 999px;                    /* Bewust bescheiden radii: galerijkaders, geen speelgoed. */

  /* --- Vorm: schaduw --- */
  --ev-shadow-card: 0 6px 22px rgba(0,0,0,.35);
  --ev-shadow-card-hover: 0 14px 34px rgba(0,0,0,.5);
  --ev-shadow-glow: 0 0 44px rgba(219,161,115,.18); /* Goudgloed achter featured elementen. */

  /* --- Motion --- */
  --ev-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* De enige easing. */
  --ev-dur-fast: 0.25s;
  --ev-dur-base: 0.7s;
  --ev-dur-slow: 1.4s;                        /* Reveals max 1× per element; alleen transform en opacity; prefers-reduced-motion altijd gerespecteerd. Foto's krijgen alleen een zachte zoom bij hover — de foto's zíjn het product, geen grayscale-trucs. */
  --ev-reveal-afstand: 26px;
  --ev-motion-pointer-x: 50;                  /* Runtime-kanaal, geen ontwerpwaarde. De horizontale muispositie in procenten, per sectie door script gezet (lichtval-spot). 50 is de neutrale rustwaarde die geldt zonder muis, bij touch en bij gereduceerde motion. Staat hier omdat een custom property buiten dit bestand een tweede bron van waarheid zou zijn (zuiverheidspoort), terwijl de vormgeving — wat er met die coordinaat gebeurt — juist in de CSS hoort en niet in het script. */
  --ev-motion-pointer-y: 50;                  /* Idem, verticaal. */
  --ev-motion-scrub: 0;                       /* Runtime-kanaal: scrollvoortgang 0..1 binnen een scene, door script gezet waar animation-timeline niet volstaat. 0 = beginstand, ook de stand bij gereduceerde motion. */
  --ev-motion-scene-height: 260vh;            /* Scrollhoogte van een sticky lichtval-scene. Hoger = trager scrubben. 260vh geeft op desktop ongeveer twee schermen scrollruimte per scene. */

  /* --- Layout --- */
  --ev-container: 1140px;
  --ev-section-y: 88px;
  --ev-layout-wide: 1420px;                   /* Brede container voor galerijen en beeldscenes, waar 1140px het beeld onnodig inperkt. */
  --ev-layout-narrow: 680px;                  /* Smalle leeskolom voor lopende tekst — circa 68 tekens per regel. */
  --ev-layout-header: 76px;                   /* Hoogte van de vaste header in de vaste staat. Nodig als scroll-marge (scroll-padding-top) en als offset voor sticky elementen; stond eerder als losse 76px in de opmaak. */

  /* --- Overig — voeg een sectiekop toe in tokens.py --- */
  --ev-color-surface-dark: #161210;           /* Pagina-achtergrond. Warm near-black uit de studiofoto's. */
  --ev-color-surface-dark-2: #1F1915;         /* Kaarten en panelen op donker. */
  --ev-color-surface-dark-3: #2A211B;         /* Hover-staat, randenbasis. */
  --ev-color-surface-light: #F7F0E7;          /* Warm papier voor documenten en lichte secties. */
  --ev-color-ink-on-dark: #F4EBDF;            /* Hoofdtekst op donker: 15,77:1 AAA. */
  --ev-color-ink-on-dark-soft: #CBB7A2;       /* Subtekst op donker: 9,60:1 AAA. */
  --ev-color-ink-on-dark-muted: #A8988A;      /* Captions en meta op donker: 6,67:1 AA. */
  --ev-color-ink-on-light: #161210;           /* 16,46:1 AAA op #F7F0E7. */
  --ev-color-ink-on-light-soft: #5C5248;
  --ev-color-border-on-dark: rgba(219, 161, 115, 0.16); /* Goudzweem-rand op donkere kaarten. Half transparant, dus geen contrastratio te berekenen — daarom nooit als tekstkleur gebruiken. */
  --ev-color-border-on-light: #E5D9C9;
}