/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Grands Rêves Catering
   Enige bron van waarheid voor kleur, typografie, ruimte en motion.
   Hardcode nooit waarden in componenten; gebruik altijd deze variabelen.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Kleur: basis ─────────────────────────────────────────────── */
  --c-ink:          #0E0D0B;   /* warm bijna-zwart — hoofdachtergrond donker */
  --c-ink-soft:     #17150F;   /* iets lichter zwart — secties, kaarten */
  --c-ink-line:     #262219;   /* lijnen op donkere grond */

  --c-cream:        #F7F3EA;   /* warme crème — hoofdachtergrond licht */
  --c-cream-soft:   #EFE9DC;   /* subtiel vlak op crème */
  --c-cream-line:   #DED6C4;   /* lijnen op lichte grond */

  --c-brass:        #A98442;   /* messing/goud — vlakken, lijnen, knoppen */
  --c-brass-ink:    #806432;   /* dieper messing — uitsluitend voor TEKST op
                                  lichte grond. Het heldere goud haalt op crème
                                  geen leescontrast (3.1:1); deze wel (5.0:1). */
  --c-brass-bright: #C9A867;   /* messing op donkere grond */
  --c-green:        #1E2A24;   /* diep bosgroen — tweede donkere tint */

  /* ── Kleur: tekst ─────────────────────────────────────────────── */
  --c-text:         #16140F;   /* tekst op crème */
  --c-text-soft:    #55503F;   /* secundaire tekst op crème */
  --c-text-mute:    #6A6456;   /* labels, meta op crème (4,9:1 — leesbaar) */

  --c-text-inv:     #F7F3EA;   /* tekst op donker */
  --c-text-inv-soft:#BEB6A4;   /* secundaire tekst op donker */
  --c-text-inv-mute:#8A8271;   /* labels, meta op donker */

  /* ── Typografie ───────────────────────────────────────────────── */
  /* Cormorant blijft het karakter dragen — dat is het merk. Jost is eruit:
     die is geometrisch getekend (ronde a, e, g) en werd op crème vaag zodra
     de letter onder de 15px kwam. Instrument Sans heeft een grotere x-hoogte
     en scherpere vormen, en leest daardoor rustiger op kleine maat. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Vloeiende schaal — schaalt mee met het scherm, geen breakpoint-sprongen */
  --t-overline: 0.6875rem;                          /* 11px, uppercase label */
  --t-xs:       0.75rem;                            /* 12px */
  --t-sm:       0.8125rem;                          /* 13px */
  --t-base:     clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-lg:       clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-xl:       clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-2xl:      clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-3xl:      clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --t-4xl:      clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem);
  --t-5xl:      clamp(3.25rem, 1.8rem + 6vw, 7rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.72;

  --ls-display: -0.025em;   /* strak, editoriaal */
  --ls-wide:    0.14em;     /* overlines en knoppen */

  /* ── Ruimte — schaal 4 / 8 / 16 / 32 / 64 ─────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Verticale sectieruimte — schaalt met het scherm.
     Bewust kleiner dan een klassiek 'editorial' ritme: veel lucht binnen een
     pagina maakt vooral lang scrollen, geen rust. De rust komt nu uit minder
     secties, niet uit grotere marges. */
  --section-y:    clamp(52px, 6vw, 96px);
  --section-y-lg: clamp(64px, 8vw, 124px);

  /* ── Layout ───────────────────────────────────────────────────── */
  --container:      1280px;
  --container-text: 720px;   /* leesbare regellengte voor lopende tekst */
  --gutter:         clamp(20px, 5vw, 64px);

  /* ── Randen & schaduw ─────────────────────────────────────────── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(14, 13, 11, 0.06);
  --shadow-md: 0 8px 30px rgba(14, 13, 11, 0.10);
  --shadow-lg: 0 30px 70px rgba(14, 13, 11, 0.22);

  /* ── Motion — rustig en editoriaal, nooit springerig ──────────── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --dur-slow:  900ms;

  /* ── Z-index ──────────────────────────────────────────────────── */
  --z-nav:     900;
  --z-overlay: 1000;
}