/* ==========================================================================
   CHERRY PARK NURSERIES — DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand Palette ---- */
  --color-primary: #2E7D32;        /* Primary Green */
  --color-primary-rgb: 46, 125, 50;
  --color-forest: #1B5E20;         /* Forest Green (deep) */
  --color-forest-rgb: 27, 94, 32;
  --color-light: #F5FAF2;          /* Light Green wash */
  --color-gold: #D4AF37;           /* Accent Gold */
  --color-gold-rgb: 212, 175, 55;
  --color-white: #FFFFFF;
  --color-dark: #1A1A1A;

  /* ---- Derived neutrals ---- */
  --color-dark-soft: #2B2B29;
  --color-ink-60: rgba(26, 26, 26, 0.6);
  --color-ink-40: rgba(26, 26, 26, 0.4);
  --color-hairline: rgba(26, 26, 26, 0.08);
  --color-hairline-on-dark: rgba(255, 255, 255, 0.12);

  /* ---- Gradients ---- */
  --gradient-canopy: linear-gradient(160deg, var(--color-forest) 0%, var(--color-primary) 55%, #3F8E44 100%);
  --gradient-sunbeam: linear-gradient(120deg, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0) 60%);
  --gradient-veil: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(15,36,16,0.86) 100%);

  /* ---- Typography ---- */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.6rem, 5vw + 1rem, 5rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  --fs-h4: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  --fs-body: clamp(0.98rem, 0.2vw + 0.9rem, 1.05rem);
  --fs-small: 0.85rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  --ls-eyebrow: 0.16em;
  --ls-tight: -0.02em;

  /* ---- Spacing scale (fluid) ---- */
  --space-3xs: clamp(0.25rem, 0.2vw, 0.4rem);
  --space-2xs: clamp(0.5rem, 0.4vw + 0.3rem, 0.75rem);
  --space-xs: clamp(0.75rem, 0.5vw + 0.5rem, 1rem);
  --space-sm: clamp(1rem, 1vw + 0.6rem, 1.5rem);
  --space-md: clamp(1.5rem, 2vw + 0.8rem, 2.5rem);
  --space-lg: clamp(2.5rem, 3vw + 1.2rem, 4.5rem);
  --space-xl: clamp(4rem, 5vw + 1.5rem, 7rem);
  --space-2xl: clamp(6rem, 7vw + 2rem, 10rem);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-soft: 0 2px 8px rgba(26,26,26,0.05), 0 12px 32px rgba(26,26,26,0.06);
  --shadow-raised: 0 8px 20px rgba(27,94,32,0.10), 0 24px 48px rgba(27,94,32,0.10);
  --shadow-gold: 0 10px 30px rgba(212,175,55,0.28);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-fab: 150;
  --z-mobile-menu: 200;
  --z-lightbox: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}