/* =========================================
   Rhos Fawr Camping — Design Tokens
   ========================================= */
:root {
  /* Colour palette */
  --c-forest-darkest: #0f1f10;
  --c-forest-dark:    #1a2f1c;
  --c-forest-mid:     #2d5a30;
  --c-forest-light:   #4a8c4e;
  --c-forest-pale:    #7bbf7f;
  --c-warm-cream:     #f5f0e8;
  --c-warm-ivory:     #faf8f3;
  --c-warm-amber:     #d48b35;
  --c-warm-amber-lt:  #e8a85a;
  --c-stone:          #8c7b6b;
  --c-stone-light:    #c4b8a8;
  --c-charcoal:       #2a2a2a;
  --c-text:           #333026;
  --c-text-muted:     #6b6355;
  --c-white:          #ffffff;
  --c-error:          #c0392b;
  --c-success:        #27ae60;
  --c-warning:        #e67e22;
  --c-info:           #2980b9;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.25rem;
  --size-2xl:  1.5rem;
  --size-3xl:  2rem;
  --size-4xl:  2.5rem;
  --size-5xl:  3.5rem;
  --size-6xl:  5rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-section: clamp(4rem, 8vw, 8rem);

  /* Layout */
  --max-width:      1200px;
  --max-width-text: 720px;
  --container-pad:  clamp(1rem, 4vw, 2rem);

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1),  0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.08);

  /* Transitions */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-slower: 600ms;

  /* Z-index scale */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-modal:  100;
  --z-toast:  200;
  --z-nav:     90;
}

/* Dark mode support — token overrides only; element overrides are in app.css */
@media (prefers-color-scheme: dark) {
  :root {
    --c-warm-ivory: #1a1a18;
    --c-warm-cream: #242420;
    --c-text:       #e8e3d8;
    --c-text-muted: #9a9080;
  }
}