/* ==========================================================================
   Milestone Real Estate — design tokens
   --------------------------------------------------------------------------
   Bron van alle waarden in het thema. Afgeleid uit de export
   (export/*.html, gelijk aan _design-referentie/homepage/styles.css en de
   CSS van de subpagina's). Geen componentstijlen in dit bestand.

   Pixelwaarden uit het ontwerp zijn omgerekend naar rem (1rem = 16px),
   zodat tekst meeschaalt met de browserinstelling van de bezoeker.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     1. Kleur — merk
     ------------------------------------------------------------------------ */

  /* Petrol-schaal. -700 is de huisstijlkleur #00525E. */
  --petrol-900: #002b33;   /* donkere vlakken: hero, CTA-blokken, footer */
  --petrol-800: #003a44;   /* hover van primaire knop */
  --petrol-700: #00525e;   /* huisstijl — logo, primaire knop, accenten */
  --petrol-600: #106773;
  --petrol-500: #2d717a;   /* accentrand */
  --petrol-400: #4e8a92;
  --petrol-300: #8ab0b5;   /* eyebrow en <em> op donker */
  --petrol-200: #c2d6d9;   /* hover van witte knop op donker */
  --petrol-100: #e3ecee;
  --petrol-050: #f2f6f7;

  /* Huisstijl-beige. Komt in het ontwerp niet voor; rol nog niet bevestigd
     (zie _design-referentie/README.md). Niet gebruiken tot dat besloten is. */
  --beige: #d9cbb3;

  /* Diepe petrol-tinten die het ontwerp naast de schaal gebruikt. */
  --petrol-ink:   #08171b; /* sectie "Projecten" op de homepage */
  --petrol-night: #06181c; /* achtergrond 3D-hero en projectoverlay */
  --petrol-media: #0e2429; /* achtergrond van beeldvlakken tijdens laden */

  /* ------------------------------------------------------------------------
     2. Kleur — neutraal (warm steengrijs, geen puur zwart)
     ------------------------------------------------------------------------ */
  --ink-900: #0b1d22;      /* primaire tekst op licht */
  --ink-800: #152a30;
  --ink-700: #2b3a40;      /* lopende tekst in kaarten en blokken */
  --ink-600: #4a555b;
  --ink-500: #69727d;      /* secundaire tekst */
  --ink-400: #8e959c;      /* tertiaire tekst, bijschriften */
  --ink-300: #bec3c7;
  --ink-200: #d8dcde;      /* lijnen en kaartranden */
  --ink-100: #edeff0;
  --ink-050: #f6f7f7;

  --paper:      #fcfcfc;   /* gebroken wit — paginagrond */
  --paper-warm: #f4f1ec;   /* warme sectiegrond */
  --white:      #ffffff;   /* kaarten */

  /* Statuskleuren (projecttabel) */
  --status-active: var(--petrol-700); /* lopend */
  --status-soon:   #b7791f;           /* in voorbereiding / aangevraagd */
  --status-done:   #5a6a70;           /* afgerond / verleend */
  --status-error:  #a3402c;           /* formulierfout; warm rood dat bij petrol past, contrast 6:1 op wit */

  /* ------------------------------------------------------------------------
     3. Kleur — rollen
     ------------------------------------------------------------------------ */
  --bg:          var(--paper);
  --bg-warm:     var(--paper-warm);
  --bg-card:     var(--white);
  --bg-inverse:  var(--petrol-900);

  --fg-1:        var(--ink-900);
  --fg-2:        var(--ink-500);
  --fg-3:        var(--ink-400);
  --fg-body:     var(--ink-700);

  --accent:        var(--petrol-700);
  --accent-hover:  var(--petrol-800);
  --accent-press:  var(--petrol-900);
  --accent-soft:   var(--petrol-100);

  --border:        var(--ink-200);
  --border-strong: var(--ink-400);
  --border-accent: var(--petrol-500);

  --link:        var(--petrol-700);
  --link-hover:  var(--petrol-900);

  --selection-bg: var(--petrol-700);
  --selection-fg: var(--white);

  /* Op donkere vlakken. Het ontwerp gebruikt wit met transparantie
     in plaats van aparte grijstinten. */
  --on-dark-1:        var(--white);               /* koppen, waarden */
  --on-dark-2:        rgb(255 255 255 / 0.72);    /* lopende tekst, navigatie */
  --on-dark-3:        rgb(255 255 255 / 0.5);     /* labels, footer */
  --on-dark-accent:   var(--petrol-300);          /* eyebrow, <em> */
  --line-on-dark:     rgb(255 255 255 / 0.14);    /* scheidingslijnen */
  --line-on-dark-soft: rgb(255 255 255 / 0.08);
  --border-on-dark:   rgb(255 255 255 / 0.28);    /* ghost-knop, tags */
  --hover-on-dark:    rgb(255 255 255 / 0.06);

  --border-ghost-light: rgb(11 29 34 / 0.18);     /* ghost-knop op licht */
  --hover-on-light:     rgb(11 29 34 / 0.04);

  /* Scrims over fotografie (petrol-900 met transparantie) */
  --scrim-header: rgb(0 43 51 / 0.82);            /* vaste header subpagina's */
  --scrim-header-light: rgb(252 252 252 / 0.94);  /* header boven lichte sectie; geen blur meer (vloeiender scrollen), daarom minder transparant */
  --scrim-label:  rgb(0 43 51 / 0.55);            /* labels op beeld */
  --scrim-media:  linear-gradient(180deg, transparent 0%, transparent 40%, rgb(0 0 0 / 0.7) 100%);
  /* Vignette over de homepage-hero: donkere rand rondom en een verloop
     boven (onder de header) en onder (achter de tekst). */
  --vignette-radial: radial-gradient(ellipse at 50% 70%, transparent 0%, transparent 40%, rgb(0 0 0 / 0.45) 100%);
  --vignette-linear: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, transparent 25%, transparent 60%, rgb(0 0 0 / 0.55) 100%);
  --scrim-hero:   linear-gradient(to top, rgb(0 43 51 / 0.92) 0%, rgb(0 43 51 / 0.45) 55%, rgb(0 43 51 / 0.55) 100%);

  /* ------------------------------------------------------------------------
     4. Typografie — families
     ------------------------------------------------------------------------ */
  /* Alata: alleen Regular; nooit faux-bold toepassen. */
  --font-display: "Alata", "Helvetica Neue", Arial, sans-serif;   /* koppen, cijfers */
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif; /* UI en lopende tekst */
  --font-serif:   "Open Sans", Georgia, serif;                    /* cursieve accenten, citaten */
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-light:   300;       /* cursief woord in de hero-titel */

  /* ------------------------------------------------------------------------
     5. Typografie — schaal
     Vaste stappen voor UI en tekst; vloeiende stappen (clamp) voor koppen.
     ------------------------------------------------------------------------ */

  /* Vast */
  --fs-micro:    0.6875rem;  /* 11 — eyebrow, labels, kengetal-labels */
  --fs-caption:  0.75rem;    /* 12 — meta, footer-onderregel */
  --fs-ui:       0.8125rem;  /* 13 — navigatie, knoppen, footer */
  --fs-small:    0.875rem;   /* 14 — kaarttekst, hero-subregel */
  --fs-body-s:   0.9375rem;  /* 15 — tekst op mobiel, lijsten */
  --fs-body:     1rem;       /* 16 — lopende tekst */
  --fs-body-l:   clamp(1rem, 1.4vw, 1.25rem);          /* 16→20 — intro onder h1 */
  --fs-body-fluid: clamp(0.9375rem, 1.05vw, 1.0625rem); /* 15→17 — .body op homepage */

  /* Koppen, klein naar groot */
  --fs-card:     clamp(1.25rem, 1.7vw, 1.625rem);   /* 20→26 — kaarttitel */
  --fs-lead:     clamp(1.25rem, 2vw, 1.875rem);     /* 20→30 — lead-alinea in Alata */
  --fs-lead-l:   clamp(1.375rem, 2.4vw, 2.25rem);   /* 22→36 — projectlead */
  --fs-lead-xl:  clamp(1.5rem, 2.6vw, 2.5rem);      /* 24→40 — leadzin werkwijze */
  --fs-h3:       clamp(1.75rem, 3vw, 2.625rem);     /* 28→42 — projectkaart-titel */
  --fs-h2-sub:   clamp(2rem, 3.8vw, 3.75rem);       /* 32→60 — h2 (sectietitels) */
  --fs-h2-cta:   clamp(2rem, 4.4vw, 4.25rem);       /* 32→68 — h2 in CTA-blok */
  --fs-h2-s:     clamp(2.25rem, 4.6vw, 4.5rem);    /* 36→72 — "Met wie wij werken." */
  --fs-h2:       clamp(2.5rem, 5.4vw, 5.5rem);      /* 40→88 — sectiekop homepage */
  --fs-h2-xl-s:  clamp(2.25rem, 11vw, 4rem);        /* 36→64 — idem, onder 768px */
  --fs-h2-xl:    clamp(3rem, 7vw, 7.5rem);          /* 48→120 — "Plekken in wording", Locaties */
  --fs-h1-sub:   clamp(2.5rem, 6.4vw, 6rem);        /* 40→96 — h1 subpagina */
  --fs-h1-project: clamp(2.5rem, 6.6vw, 6.5rem);    /* 40→104 — h1 projectdetail */
  --fs-display:  clamp(3rem, 9.2vw, 9.5rem);        /* 48→152 — hero-titel */
  --fs-display-contact: clamp(4rem, 12vw, 12.5rem); /* 64→200 — contacttitel */
  --fs-statement-s: clamp(1.75rem, 7vw, 2.75rem);   /* 28→44 — manifest op mobiel */
  --fs-statement: clamp(2.25rem, 5.6vw, 5.5rem);    /* 36→88 — manifest */

  /* Citaten (Open Sans italic) */
  --fs-quote-s:  clamp(1.125rem, 1.7vw, 1.5rem);    /* 18→24 — citaat projectpagina */
  --fs-quote-m:  clamp(1.375rem, 2.4vw, 2.25rem);   /* 22→36 — citaat oprichter */
  --fs-quote-l:  clamp(1.75rem, 3.6vw, 3.5rem);     /* 28→56 — visie */

  /* Cijfers (Alata) */
  --fs-stat-s:   clamp(1.25rem, 2vw, 1.875rem);     /* 20→30 — kengetallen project */
  --fs-stat-m:   clamp(2rem, 3vw, 3rem);            /* 32→48 — feiten oprichter */
  --fs-stat-l:   clamp(3rem, 6vw, 6rem);            /* 48→96 — grote kerncijfers */

  /* Regelhoogte */
  --lh-display: 0.94;   /* hero, grote koppen */
  --lh-tight:   1;      /* sectiekoppen */
  --lh-heading: 1.05;   /* subpagina-koppen */
  --lh-snug:    1.15;   /* kaarttitels, citaten */
  --lh-lead:    1.25;
  --lh-body:    1.6;
  --lh-relaxed: 1.7;    /* lange lopende tekst */

  /* Letterspatiëring */
  --tr-display: -0.03em;   /* grote Alata-koppen */
  --tr-heading: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-ui:      0.04em;    /* knoppen, navigatie (uppercase) */
  --tr-label:   0.16em;    /* meta, kaartlabels */
  --tr-eyebrow: 0.22em;    /* eyebrow boven koppen */

  /* Maximale regellengte */
  --measure-s:  36ch;
  --measure-m:  52ch;
  --measure-l:  60ch;

  /* ------------------------------------------------------------------------
     6. Ruimte — 4px-basis
     ------------------------------------------------------------------------ */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-30: 7.5rem;    /* 120 */

  /* Vloeiende ruimtes uit het ontwerp */
  --gap-grid:    clamp(1.25rem, 2.4vw, 2.25rem);  /* 20→36 — tussen kaarten */
  --gap-split:   clamp(2rem, 6vw, 6rem);          /* 32→96 — tussen twee kolommen */
  --gap-stack:   clamp(2.5rem, 6vh, 4.5rem);      /* 40→72 — kop tot inhoud */

  /* Sectie-padding (boven/onder). Mobiel compact (56px boven en onder,
     samen ~112px tussen twee secties); vanaf 768px de vloeiende waarden uit
     het ontwerp (zie de mediaquery onderaan). */
  --section-xl:  clamp(7.5rem, 16vh, 12.5rem);    /* 120→200 — homepage-secties */
  --section-l:   3.5rem;                          /* 56 — mobiel; 80→140 vanaf 768px */
  --section-m:   3.5rem;                          /* 56 — mobiel; 72→140 vanaf 768px */
  --section-hero-top: clamp(8.75rem, 20vh, 13.75rem); /* 140→220 — ruimte onder vaste header */
  /* Hoogte van de hero op alle pagina's behalve de homepage (gelijk aan die
     van Projecten). Mobiel 576px; vanaf 1024px meegroeiend met het scherm,
     ruim genoeg voor de langste titel (Contact). */
  --hero-h: 36rem;
  --section-mobile: 3.5rem;                       /* 56 — vaste sectie-padding op mobiel */

  /* ------------------------------------------------------------------------
     7. Layout
     ------------------------------------------------------------------------ */
  --shell-max:     1480px;                       /* maximale inhoudsbreedte */
  --shell-pad:     clamp(1.25rem, 5vw, 4rem);    /* 20→64 — zijmarge */
  --header-pad-y:  1.375rem;                     /* 22 */
  --header-pad-y-mobile: 0.875rem;               /* 14 */
  /* Headerhoogte: padding boven + knop + padding onder. Wordt vanaf 768px
     groter (zie onderaan). Secties die onder de header door moeten (hero)
     trekken zich hiermee op. */
  --header-h:    4.25rem;                        /* 68 = 14 + 40 + 14 */

  /* Breakpoints (mobile first: min-width). Custom properties werken niet in
     @media; deze waarden zijn de referentie voor CSS en voor matchMedia() in JS.
     Gebruik in CSS: 48em (768), 64em (1024), 80em (1280). */
  --bp-md: 768px;   /* tablet  — ontwerp: 720/760/768/800 */
  --bp-lg: 1024px;  /* desktop — ontwerp: 860/900/1000/1024 */
  --bp-xl: 1280px;  /* breed */

  /* ------------------------------------------------------------------------
     8. Vorm
     ------------------------------------------------------------------------ */
  --radius-xs:   2px;     /* beeld, kaarten, tags, knoppen op subpagina's */
  --radius-sm:   4px;
  --radius-pill: 999px;   /* primaire en ghost-knop, statuslabel */
  --radius-round: 50%;    /* ronde pijlknop, pulse */

  --border-width: 1px;
  --border-width-accent: 2px; /* citaatlijn links */

  --shadow-lift: 0 24px 56px rgb(0 43 51 / 0.10); /* kaart bij hover */
  --shadow-sm:   0 2px 6px rgb(11 29 34 / 0.06), 0 1px 2px rgb(11 29 34 / 0.04);
  --shadow-md:   0 8px 24px rgb(11 29 34 / 0.08), 0 2px 6px rgb(11 29 34 / 0.04);

  --blur-header: none; /* was blur(14px) saturate(140%): kostte bij elke scrollstap een herberekening */

  /* Beeldverhoudingen */
  --ratio-card:     4 / 3;
  --ratio-card-mobile: 16 / 9;
  --ratio-portrait: 4 / 5;
  --ratio-wide:     16 / 10;
  --ratio-tall:     3 / 4;

  /* ------------------------------------------------------------------------
     9. Beweging
     ------------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.1, 1);   /* standaard: kaarten, reveal, zoom */
  --ease-soft:   cubic-bezier(0.2, 0.6, 0.2, 1);   /* knoppen, pijl */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);   /* clip-reveal van beeld */
  --ease-plain:  ease;                             /* kleur, opacity */

  --dur-1: 180ms;    /* linkkleur */
  --dur-2: 250ms;    /* kleur, rand, achtergrond */
  --dur-3: 350ms;    /* knop, header-overgang */
  --dur-4: 500ms;    /* kaart-lift */
  --dur-5: 900ms;    /* reveal bij scrollen */
  --dur-6: 1000ms;   /* beeld-zoom in kaart */
  --dur-7: 1200ms;   /* clip-reveal */
  --dur-8: 1300ms;   /* hero-foto komt binnen */
  --dur-9: 1600ms;   /* lijnenraster tekent zich */
  --dur-10: 2200ms;  /* hero-foto zakt in (settle) */

  --stagger: 80ms;   /* vertraging per stap in reveal-reeks */

  --lift-card:   -4px;  /* translateY bij hover */
  --lift-media:  -8px;
  --zoom-media:  1.04;  /* scale bij hover */
  --reveal-shift: 28px; /* startafstand van reveal */
  --shift-list: 6px;    /* lijstitem bij hover */
  --zoom-settle-from: 1.12; /* hero-foto bij laden, van… */
  --zoom-settle-to: 1.02;   /* …naar */
  --zoom-reveal-from: 1.15; /* zijfoto bij ontvouwen */

  /* ------------------------------------------------------------------------
     10. Lagen
     ------------------------------------------------------------------------ */
  --z-content: 10;
  --z-rail:    50;
  --z-header:  60;
  --z-overlay: 120;
}

@media (min-width: 48em) {
  :root {
    --header-h: 6.25rem;                         /* 100 = 22 + 56 + 22 */
    --section-l: clamp(5rem, 12vh, 8.75rem);     /* 80→140 — compacte homepage-secties */
    --section-m: clamp(4.5rem, 11vh, 8.75rem);   /* 72→140 — blokken subpagina's */
  }
}

/* Beweging uit voor wie daarom vraagt: componenten die deze tokens
   gebruiken, vallen vanzelf stil. */
@media (min-width: 64em) {
  :root {
    --hero-h: clamp(36rem, 82svh, 45rem);        /* 576→720 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
    --dur-6: 0ms;
    --dur-7: 0ms;
    --dur-8: 0ms;
    --dur-9: 0ms;
    --dur-10: 0ms;
    --stagger: 0ms;
    --lift-card: 0px;
    --lift-media: 0px;
    --zoom-media: 1;
    --reveal-shift: 0px;
    --shift-list: 0px;
    --zoom-settle-from: 1;
    --zoom-settle-to: 1;
    --zoom-reveal-from: 1;
  }
}