/* ==========================================================================
   Verzijden Clinics — design tokens
   --------------------------------------------------------------------------
   Single source of truth for every value used in the homepage design.
   Import once, at the top of globals.css. Never hard-code a hex, a duration
   or a radius in a component: reach for a token.

   The four brand colours are fixed by the brand guide (1424_KLU_BrandGuide_V1)
   and must not be altered. Everything else is a tint inside the same warm
   range, which the guide explicitly permits. There is deliberately NO accent
   colour — hierarchy comes from tone, proportion and white space.
   ========================================================================== */

:root {
  /* --- Brand-fixed (do not alter) ------------------------------------- */
  --brand-dark: #4f4a47;   /* Primair donker — replaces black */
  --brand-light: #857b70;  /* Primair licht */
  --brand-sand: #ede9de;   /* Achtergrond */
  --brand-white: #ffffff;  /* Wit */

  /* --- Stone ramp (derived) ------------------------------------------- */
  --stone-100: #efedeb;
  --stone-200: #d9d5d1;
  --stone-300: #c2bcb6;
  --stone-400: #a49c93;
  --stone-500: #857b70;    /* = --brand-light */
  --stone-600: #6f665d;
  --stone-700: #5c5652;
  --stone-800: #4f4a47;    /* = --brand-dark */
  --stone-900: #3a3634;
  --stone-950: #2a2725;

  /* --- Sand ramp (derived) -------------------------------------------- */
  --sand-50: #faf8f4;
  --sand-100: #f4f1e9;
  --sand-200: #ede9de;     /* = --brand-sand */
  --sand-300: #e3ddce;

  /* --- Ink -------------------------------------------------------------
     Three levels only. NOTE: --text-secondary is stone-600 (#6f665d), one
     step darker than the design system's default stone-500. #857b70 on the
     cream page measures 3.9:1 and fails WCAG AA; #6f665d measures 5.3:1.
     This darker secondary is intentional for this audience — keep it. */
  --text-primary: var(--stone-800);
  --text-secondary: var(--stone-600);
  --text-muted: var(--stone-400);
  --text-inverse: var(--brand-white);
  --text-inverse-strong: rgb(255 255 255 / 0.92);
  --text-inverse-body: rgb(255 255 255 / 0.86);
  --text-inverse-muted: rgb(255 255 255 / 0.82);
  --text-inverse-label: rgb(255 255 255 / 0.58);
  --text-link: var(--stone-800);
  --text-link-hover: var(--stone-600);

  /* --- Surfaces ------------------------------------------------------- */
  --surface-page: var(--sand-50);      /* default canvas */
  --surface-card: var(--brand-white);
  --surface-sand: var(--sand-200);     /* alternating band */
  --surface-footer: var(--sand-100);
  --surface-inverse: var(--stone-800); /* the one dark moment per page */
  --surface-wash: var(--sand-50);      /* row / cell hover on white */

  /* --- Borders (the brand's only separator) --------------------------- */
  --border-hairline: rgb(79 74 71 / 0.08);
  --border-subtle: rgb(79 74 71 / 0.14);
  --border-default: rgb(79 74 71 / 0.24);
  --border-strong: var(--stone-800);
  --border-inverse: rgb(255 255 255 / 0.28);

  /* --- Interaction ---------------------------------------------------- */
  --state-hover-ink: var(--stone-600);
  --state-press-ink: var(--stone-900);
  --state-hover-wash: rgb(79 74 71 / 0.04);
  --state-disabled-ink: var(--stone-300);
  --state-disabled-surface: var(--sand-100);
  --focus-ring: 0 0 0 3px rgb(133 123 112 / 0.55); /* warm halo, never blue */
  --press-scale: 0.985;
  --lift: -2px;                                     /* hover lift, everywhere */

  /* --- Typography -----------------------------------------------------
     Two faces, two line heights. --font-display / --font-body are set by
     next/font in layout.tsx; the fallbacks below keep the CSS standalone. */
  --font-display: var(--font-marcellus), "Marcellus", Georgia, serif;
  --font-body: var(--font-figtree), "Figtree", Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;   /* the heaviest weight in this brand */

  --leading-display: 1.2;
  --leading-body: 1.8;    /* brand signature — do not tighten */

  --size-h1: 58px;
  --size-h2: 42px;
  --size-h3: 28px;
  --size-h4: 25px;        /* person name */
  --size-statement: 38px; /* pull quote on the image band */
  --size-address: 28px;   /* Marcellus address in the dark block */
  --size-stat: 56px;      /* trust-bar figure */
  --size-stat-unit: 21px;
  --size-lead: 22px;      /* hero intro */
  --size-body-l: 19px;    /* default body */
  --size-body: 18px;
  --size-body-s: 17px;
  --size-quote: 20px;
  --size-nav: 16px;
  --size-meta: 15px;      /* footer legal */
  --size-label: 13px;     /* eyebrow / label */
  /* Knoppen staan een punt kleiner dan de labels. Eigen token, want een
     eyebrow en een knoplabel horen niet meer aan dezelfde maat vast. */
  --size-button: 12px;    /* button */

  --tracking-h1: -0.012em;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.14em;
  --tracking-button: 0.14em;

  --measure-default: 62ch;
  --measure-body: 52ch;
  --measure-narrow: 38ch;
  --measure-step: 56ch;
  --measure-row: 58ch;

  /* --- Layout ---------------------------------------------------------- */
  --container: 1460px;     /* outer max width */
  --container-pad: 80px;   /* → 1300px of content */
  --section-y: 128px;      /* vertical rhythm; crowded = missing space */
  --gap-columns: 88px;
  --gap-cards: 32px;
  --pad-card: 40px;
  --pad-card-tight: 32px;

  --header-h: 152px;       /* transparent state, over the hero */
  --header-h-scrolled: 96px;
  --header-logo-h: 34px;   /* wordmark, white */
  --header-logo-h-scrolled: 38px; /* beeldmerk, primary */
  --hero-h: 860px;
  --band-h: 620px;
  --z-header: 60;

  /* --- Radius ----------------------------------------------------------
     Square, except capsules. If you type 8px or 12px, stop. */
  --radius-none: 0;
  --radius-check: 2px;
  --radius-pill: 999px;

  /* --- Elevation (warm-tinted; a grey shadow looks wrong on cream) ---- */
  --shadow-card-hover: 0 12px 32px rgb(79 74 71 / 0.10);
  --shadow-float: 0 10px 30px rgb(79 74 71 / 0.12);  /* dropdowns */
  --shadow-raised: 0 18px 48px rgb(79 74 71 / 0.10); /* trust bar */

  /* --- Motion ---------------------------------------------------------
     Fades and short upward drifts only. No bounce, spring or parallax.
     cubic-bezier(0.22, 0.61, 0.36, 1) is the only easing curve. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-hover: 160ms;
  --duration-base: 240ms;
  --duration-fade: 220ms;   /* slider crossfade */
  --duration-reveal: 760ms; /* on-scroll reveal */
  --duration-reveal-img: 900ms;
  --duration-reveal-img-scale: 1400ms;
  --duration-entrance: 720ms;
  --duration-count: 1100ms; /* stat counter */
  --duration-ken: 14s;      /* hero Ken Burns */
  --reveal-rise: 20px;
  --entrance-rise: 14px;
  --stagger-step: 100ms;
  --stagger-max: 6;         /* cap, so long lists don't crawl */

  /* --- Scrims ---------------------------------------------------------
     Type on an image is protected by a soft gradient — never a solid plate.
     Black-based (not warm) so white type stays crisp. */
  --scrim-hero-top: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.68) 0%,
    rgb(0 0 0 / 0.34) 48%,
    rgb(0 0 0 / 0) 100%
  );
  --scrim-hero-bottom: linear-gradient(
    180deg,
    rgb(0 0 0 / 0) 0%,
    rgb(0 0 0 / 0.20) 28%,
    rgb(0 0 0 / 0.46) 58%,
    rgb(0 0 0 / 0.72) 100%
  );
  --scrim-band: linear-gradient(
    90deg,
    rgb(0 0 0 / 0.80) 0%,
    rgb(0 0 0 / 0.58) 46%,
    rgb(0 0 0 / 0.22) 78%,
    rgb(0 0 0 / 0.12) 100%
  );

  /* --- Chrome --------------------------------------------------------- */
  --chrome-veil: rgb(250 248 244 / 0.90);
  --chrome-blur: saturate(120%) blur(14px);
}