/* ============================================================
   Imagine Spain — Design tokens (alles aanpasbaar zonder code)
   Merk: kust/Estepona — zand-neutralen + warm terracotta accent
   ============================================================ */
:root {
  /* --- Kleuren --- */
  --c-white: #ffffff;
  --c-ink: #1a1511;          /* warm near-black, body text */
  --c-ink-soft: #524b42;     /* secundaire tekst */
  --c-ink-muted: #8a8178;    /* meta/labels */

  --c-sand-50: #faf8f5;      /* lichte sectie-achtergrond */
  --c-sand-100: #f3efe9;
  --c-sand-200: #e7e0d6;     /* borders/dividers */
  --c-sand-300: #d8cfc1;

  --c-accent: #e07a1f;       /* terracotta — CTA */
  --c-accent-strong: #c4540f;/* hover */
  --c-accent-soft: #fbeede;  /* accent-tint vlak */
  --c-sea: #1f6f8b;          /* subtiel kust-blauw (links/iconen) */

  --c-success: #2f8f5b;
  --c-bg: var(--c-white);
  --c-surface: var(--c-sand-50);
  --c-border: var(--c-sand-200);

  /* --- Typografie --- */
  --font-head: 'Varela Round', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-300: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --fs-400: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);   /* body */
  --fs-500: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  --fs-600: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-700: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-800: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);       /* hero H1 */
  --fs-900: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.65;

  /* --- Ruimte --- */
  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5rem;
  --space-8: 7.5rem;

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1380px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Vorm --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,21,17,.06), 0 2px 6px rgba(26,21,17,.05);
  --shadow: 0 6px 18px rgba(26,21,17,.08), 0 2px 6px rgba(26,21,17,.05);
  --shadow-lg: 0 20px 50px rgba(26,21,17,.14);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;

  --header-h: 78px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}