/* ═══════════════════════════════════
   DESIGN TOKENS — Natuurlijk.fit
   Clean Clinical aesthetic
═══════════════════════════════════ */

/* Google Fonts worden geladen via functions.php */

:root {
  /* ── Palette ── */
  --deep:       #1B4332;
  --mid:        #2D6A4F;
  --acc:        #52B788;
  --acc-light:  #6CD49A;
  --pale:       #D8F3DC;
  --cream:      #F5F0E8;
  --ivory:      #FAFAF5;
  --charcoal:   #0F1F18;
  --muted:      #4A6358;
  --border:     #C8DDD2;
  --white:      #FFFFFF;

  /* ── Typography ── */
  --heading:    'DM Serif Display', Georgia, 'Times New Roman', serif;
  --body:       'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* ── Font sizes (fluid) ── */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.25rem;     /* 20px */
  --text-xl:    clamp(1.5rem, 2.5vw, 2rem);
  --text-2xl:   clamp(1.8rem, 3vw, 2.5rem);
  --text-3xl:   clamp(2.2rem, 4vw, 3.2rem);
  --text-4xl:   clamp(2.6rem, 5vw, 4rem);

  /* ── Spacing (4px scale) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Radii ── */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(15, 31, 24, .05);
  --shadow-md:  0 4px 12px rgba(15, 31, 24, .08);
  --shadow-lg:  0 8px 30px rgba(15, 31, 24, .12);
  --shadow-xl:  0 16px 50px rgba(15, 31, 24, .16);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   .15s;
  --dur-med:    .3s;
  --dur-slow:   .5s;

  /* ── Layout ── */
  --nav-height:  110px;
  --max-width:   1280px;
  --gutter:      clamp(20px, 5vw, 80px);
}