/* ============================================================
   Ervaar Breda — Design Tokens
   De enige plek waar kleuren/typen/spacing gedefinieerd worden.
   ============================================================ */

:root {
  /* -------- Brand kleuren (gesampled uit huidige huisstijl) -------- */
  --brand-navy:        #0D347F;   /* primair, logo-achtergrond */
  --brand-navy-deep:   #081E4B;   /* donkerder voor hover/dieptes */
  --brand-navy-soft:   #2B4A8F;   /* lichter navy voor secundair */
  --brand-blue:        #166AEA;   /* helder blauw, spaarzaam */

  /* Oranje is de primaire CTA/accent uit huidige huisstijl — warm, uitnodigend */
  --brand-orange:      #FF8210;   /* primaire CTA */
  --brand-orange-deep: #D66500;   /* hover/pressed */
  --brand-orange-soft: #FFA54D;   /* licht, voor hints/hover-states */

  /* -------- Paginakleuren (warm, editorial) -------- */
  --paper:             #F6F1E8;   /* warm cream — hoofdachtergrond */
  --paper-soft:        #EDE6D8;   /* iets dieper cream voor secties */
  --ink:               #14161A;   /* donker-neutraal, niet zwart */
  --ink-soft:          #4A4E57;   /* secundair tekst */
  --ink-mute:          #8A8E97;   /* captions, meta */
  --line:              #D9CFBB;   /* hairline dividers op cream */
  --line-dark:         rgba(20, 22, 26, 0.12);

  /* -------- Accent-alias — CTA gebruikt oranje als primair -------- */
  --accent:            var(--brand-orange);
  --accent-deep:       var(--brand-orange-deep);
  --accent-soft:       var(--brand-orange-soft);

  /* -------- Feedback -------- */
  --whatsapp:          #25D366;
  --whatsapp-dark:     #128C7E;

  /* -------- Typografie families -------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-label:   var(--font-body);

  /* -------- Type-schaal (desktop) — fluid via clamp -------- */
  --fs-display:  clamp(3.25rem, 4vw + 2rem, 6rem);     /* 52→96 */
  --fs-h1:       clamp(2.5rem, 2.5vw + 1.5rem, 4.5rem); /* 40→72 */
  --fs-h2:       clamp(2rem, 1.5vw + 1.25rem, 3.25rem); /* 32→52 */
  --fs-h3:       clamp(1.5rem, 0.5vw + 1.25rem, 2rem);  /* 24→32 */
  --fs-h4:       clamp(1.25rem, 0.25vw + 1.125rem, 1.5rem);
  --fs-body-lg:  1.1875rem;   /* 19px */
  --fs-body:     1.0625rem;   /* 17px */
  --fs-body-sm:  0.9375rem;   /* 15px */
  --fs-label:    0.75rem;     /* 12px — uppercase eyebrow */
  --fs-caption:  0.8125rem;   /* 13px */

  /* -------- Line-heights -------- */
  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-body:    1.65;
  --lh-lose:    1.85;

  /* -------- Letter spacing -------- */
  --ls-display: -0.02em;   /* negative tracking op serif-display */
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-label:   0.18em;    /* wide tracking op uppercase labels */

  /* -------- Weights (Fraunces + Inter) -------- */
  --fw-display: 400;
  --fw-display-bold: 500;
  --fw-body:    400;
  --fw-body-med: 500;
  --fw-body-bold: 600;

  /* -------- Spacing (8-pt grid + editorial block-spacing) -------- */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */
  --space-40:  10rem;    /* 160 — editorial block-padding */
  --space-48:  12rem;    /* 192 */

  /* Block-padding (vertical) — fluid */
  --block-py:     clamp(4rem, 8vw, 10rem);
  --block-py-lg:  clamp(6rem, 12vw, 14rem);

  /* -------- Container -------- */
  --container:     1440px;
  --container-narrow: 960px;
  --gutter:        clamp(1.25rem, 4vw, 4rem);

  /* -------- Radii & borders -------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;
  --border:     1px solid var(--line);

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   180ms;
  --t-med:    320ms;
  --t-slow:   600ms;
  --t-reveal: 550ms;

  /* -------- Elevation (spaarzaam) -------- */
  --shadow-soft: 0 1px 2px rgba(20,22,26,.04), 0 8px 24px rgba(20,22,26,.06);
  --shadow-lift: 0 4px 12px rgba(20,22,26,.08), 0 20px 40px rgba(20,22,26,.10);
  --shadow-button: 0 2px 8px rgba(255,130,16,.22);

  /* -------- Layering -------- */
  --z-base:    0;
  --z-nav:     50;
  --z-float:   80;
  --z-modal:   100;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med:  0ms;
    --t-slow: 0ms;
    --t-reveal: 0ms;
  }
}