/* ==========================================================================
   Reiki by Daniëlle — design tokens
   Overgenomen uit het Claude Design system "Reiki by Daniëlle Design System".
   Niet met de hand aanpassen zonder het designsysteem bij te werken.
   ========================================================================== */

:root {
  /* --- Merk-basispalet (gesampled van de flyer) --- */
  --cream-50: #F5EFE7;
  --cream-100: #ECE4D9;   /* Cream — primaire achtergrond */
  --cream-200: #E1D7C8;
  --cream-300: #D3C6B2;

  --olive-300: #A79C7E;
  --olive-400: #918766;
  --olive-500: #7D7254;   /* Olijf/salie — banners, footer */
  --olive-600: #69603F;
  --olive-700: #4F4830;

  --gold-400: #C08F5B;
  --gold-500: #A16E3F;    /* Warm goud — kaarslicht, iconen */
  --terra-500: #94633B;   /* Terracotta-bruin — hout, pampas */

  --rust-300: #D3AC9C;
  --rust-400: #C29483;
  --rust-500: #B27F6A;    /* Terracotta-roest — ALLEEN voor acties */
  --rust-600: #9B6A56;
  --rust-700: #7F5544;

  --ink-900: #2A2C2B;
  --ink-700: #3D3F3E;     /* Houtskoolbruin — koppen */
  --ink-500: #686151;     /* Gedempt bruin — bodytekst */
  --ink-300: #8E8878;
  --white: #FFFFFF;

  --whatsapp: #25D366;    /* officieel WhatsApp-groen, alleen voor de WhatsApp-knop */
  --whatsapp-dark: #1DA851;

  /* --- Semantische aliassen --- */
  --surface-page: var(--cream-100);
  --surface-page-alt: var(--cream-50);
  --surface-card: var(--white);
  --surface-card-soft: var(--cream-50);
  --surface-inverse: var(--olive-500);
  --surface-offer: var(--rust-500);
  --surface-photo-scrim: rgba(42, 44, 43, .42);

  --text-heading: var(--ink-700);
  --text-body: var(--ink-500);
  --text-muted: var(--ink-300);
  --text-on-inverse: var(--cream-50);
  --text-on-offer: #FFF8F2;
  --text-script: var(--olive-500);
  --text-link: var(--rust-600);
  --text-link-hover: var(--rust-700);

  --border-hairline: rgba(125, 114, 84, .28);
  --border-card: rgba(125, 114, 84, .18);
  --border-strong: var(--olive-500);
  --border-on-inverse: rgba(245, 239, 231, .35);

  --icon-default: var(--olive-500);
  --icon-accent: var(--gold-500);
  --icon-on-inverse: var(--cream-100);

  --action-bg: var(--rust-500);
  --action-bg-hover: var(--rust-600);
  --action-bg-active: var(--rust-700);
  --action-text: #FFF8F2;
  --action-ring: rgba(178, 127, 106, .34);

  --focus-ring: var(--olive-600);

  /* --- Typografie --- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-serif-soft: "Cormorant Garamond", Georgia, serif;
  --font-script: "Parisienne", cursive;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-display-1: clamp(2.5rem, 8vw, 4rem);   /* 40 → 64 */
  --fs-display-2: clamp(2rem, 6vw, 3rem);     /* 32 → 48 */
  --fs-h1: 2rem;
  --fs-h2: 1.625rem;
  --fs-h3: 1.25rem;
  --fs-script: 1.75rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-script: 1.35;

  --tracking-eyebrow: 0.18em;
  --tracking-wordmark: 0.06em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --measure-body: 62ch;
  --measure-narrow: 38ch;

  /* --- Ruimte --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;

  --gutter-mobile: 20px;
  --gutter-desktop: 32px;
  --content-max: 660px;
  --page-max: 1080px;

  /* --- Radius --- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --hairline: 1px;
  --border-frame: 1.5px;

  /* --- Elevatie: warmbruin en nauwelijks zichtbaar, nooit neutraal grijs --- */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(61, 63, 62, .04), 0 8px 24px rgba(125, 114, 84, .08);
  --shadow-card: 0 2px 4px rgba(61, 63, 62, .04), 0 14px 32px rgba(125, 114, 84, .10);
  --shadow-lift: 0 4px 8px rgba(61, 63, 62, .05), 0 22px 48px rgba(125, 114, 84, .14);
  --shadow-action: 0 6px 18px rgba(155, 106, 86, .28);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-card);
  --glow-candle: 0 0 48px rgba(193, 143, 91, .35);
  --scrim-photo: linear-gradient(180deg, rgba(42, 44, 43, .10) 0%, rgba(42, 44, 43, .55) 100%);
  --scrim-bottom: linear-gradient(180deg, rgba(42, 44, 43, 0) 0%, rgba(42, 44, 43, .72) 100%);

  /* --- Motion: kalm en traag. Alleen fades en kleine stijgingen. --- */
  --ease-calm: cubic-bezier(.25, .1, .25, 1);
  --ease-out-soft: cubic-bezier(.16, .72, .32, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-breathe: 6000ms;
  --rise-reveal: 14px;
  --press-shift: 1px;

  /* --- Layout --- */
  --header-h: 124px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --rise-reveal: 0px;
  }
}