/**
 * variables.css
 * Design tokens for Meadow Lane Park theme.
 * All colours, spacing, typography, and radii are defined here.
 */

:root {
  /* ── Brand colours ─────────────────────────────────── */
  --clr-slate:          #1a2820;  /* near-black — used for dark cards */
  --clr-slate-mid:      #2C3E35;  /* medium dark green */
  --clr-slate-dark:     #111f17;  /* deepest dark */

  --clr-teal:           #4A7C6F;
  --clr-teal-mid:       #6E9E92;
  --clr-teal-pale:      #DCF0EB;
  --clr-teal-light:     #EEF7F4;

  --clr-water:          #B8D4E8;
  --clr-water-light:    #E4EFF7;
  --clr-water-pale:     #F0F6FB;

  --clr-stone:          #E8E4DB;
  --clr-stone-light:    #F4F2EE;
  --clr-cream:          #FDFCF8;

  --clr-gold:           #B8935A;
  --clr-gold-light:     #F0E6D4;

  /* ── Text colours ───────────────────────────────────── */
  --clr-text-dark:      #1E2D28;
  --clr-text-mid:       #4A5E56;
  --clr-text-light:     #7A8F87;
  --clr-text-xlight:    #A8B8B2;

  /* ── UI feedback ────────────────────────────────────── */
  --clr-success:        #2E7D32;
  --clr-warning:        #E65100;
  --clr-error:          #C62828;
  --clr-info:           #01579B;

  /* ── Typography ─────────────────────────────────────── */
  --font-serif:         'Playfair Display', Georgia, serif;
  --font-sans:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:          'DM Mono', 'Courier New', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.65;
  --leading-loose:   1.85;

  /* ── Spacing scale ───────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 100px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* ── Layout ──────────────────────────────────────────── */
  --container-max:   1160px;
  --container-pad:   var(--space-16);
  --section-gap:     var(--space-20);

  /* ── Z-index layers ──────────────────────────────────── */
  --z-base:      1;
  --z-raised:    10;
  --z-nav:       100;
  --z-overlay:   200;
  --z-modal:     300;
}

/* ── Reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}