/* ==========================================================================
   DreamChaserz — design tokens
   Eén bron van waarheid voor kleur, type, ritme en beweging.
   Bij de WordPress-migratie wordt dit bestand de basis van de theme-stylesheet.
   ========================================================================== */

:root {
  /* --- kleur: donkere basis ---------------------------------------------- */
  --ink:        #0a0a0b;  /* pagina-achtergrond, licht koel */
  --ink-2:      #121316;  /* kaarten en verhoogde vlakken */
  --ink-3:      #17181c;  /* invoervelden, hover-vlakken */
  --asphalt:    #1c1d21;  /* randen op donker */

  /* --- kleur: goud ------------------------------------------------------- */
  --gold:       #e3bc63;  /* goud voor tekst en iconen — 10.8:1 op --ink */
  --gold-hi:    #f3d98b;  /* highlight van het metaal */
  --gold-mid:   #d9b24c;  /* body van het metaal */
  --gold-lo:    #9c6f22;  /* schaduw van het metaal */
  --gold-ink:   #7a5518;  /* goud op lichte vlakken — 5.6:1 op --gallery */
  --gold-metal: linear-gradient(122deg, var(--gold-lo) 0%, var(--gold-mid) 34%, var(--gold-hi) 52%, var(--gold-mid) 70%, var(--gold-lo) 100%);
  /* zelfde metaal, maar de donkere uiteinden opgelicht zodat de zwarte
     knoptekst ook in de hoeken boven 7:1 blijft */
  --gold-btn:   linear-gradient(122deg, #c9973a 0%, #e0bb5f 34%, var(--gold-hi) 52%, #dfb95c 70%, #c9973a 100%);

  /* --- kleur: licht ------------------------------------------------------ */
  --bone:       #ede9e2;  /* leestekst op donker — 16:1 */
  --mute:       #9a968e;  /* secundaire tekst — 6.7:1 */
  --gallery:    #e8e7e4;  /* neutraal galerie-grijs, het lichte kapittel */
  --gallery-2:  #dcdad4;  /* randen op licht */
  --gallery-3:  #f2f1ee;  /* kaarten op licht */
  --alert:      #e2685e;  /* uitsluitend formulierfouten */

  /* --- lijnen ------------------------------------------------------------ */
  --hair:        1px solid rgb(237 233 226 / 14%);
  --hair-strong: 1px solid rgb(237 233 226 / 26%);
  --hair-light:  1px solid rgb(10 10 11 / 14%);
  --hair-gold:   1px solid rgb(227 188 99 / 42%);

  /* --- typografie -------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* extended grotesk = badge-typografie van de autowereld */
  --wide:      118%;
  --wide-soft: 108%;

  --t-hero:  clamp(2.6rem, 8.4vw, 5.5rem);
  --t-h1:    clamp(2.15rem, 5.6vw, 4.25rem);
  --t-h2:    clamp(1.7rem, 3.7vw, 2.9rem);
  --t-h3:    clamp(1.15rem, 1.5vw, 1.5rem);
  --t-h4:    clamp(1rem, 1vw, 1.125rem);
  --t-lead:  clamp(1.0625rem, .55vw + .95rem, 1.3125rem);
  --t-body:  clamp(1rem, .2vw + .95rem, 1.0625rem);
  --t-small: .9375rem;
  --t-mono:  .75rem;

  --lh-display: .94;
  --lh-tight:   1.12;
  --lh-body:    1.62;

  --track-display: -.02em;
  --track-mono:    .17em;

  /* --- ritme ------------------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem; --s-12: 9rem;

  --container:   1280px;
  --container-n: 900px;             /* smal, voor leestekst */
  --container-w: 1520px;            /* ruim, voor pagina's die op beeld draaien */
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --section-y:   clamp(4.5rem, 9vw, 9.5rem);
  --nav-h:       72px;

  /* --- vorm en diepte ---------------------------------------------------- */
  --r:    2px;                      /* scherp; precisie boven zachtheid */
  --r-lg: 3px;
  --shadow:    0 24px 60px -24px rgb(0 0 0 / 70%);
  --shadow-lg: 0 40px 90px -30px rgb(0 0 0 / 85%);

  /* --- beweging: alles beweegt lateraal, als een tracking shot ----------- */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-in:  cubic-bezier(.55, 0, .45, 1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .6s;
  --dur-4: 1.1s;

  --z-nav: 100;
  --z-menu: 120;
  --z-skip: 200;
}