/* ============================================================
   DESIGN TOKENS — Randoms Lawn Care & Hardscaping
   Single source of truth for all visual properties.
   Scalable: any AI model or developer can adjust these
   tokens to re-theme the entire site.
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-hunter:        #355E3B;
  --color-hunter-dark:   #2A4B30;
  --color-hunter-light:  #4A7A52;
  --color-forest:        #1B3A20;
  --color-sage:          #8BAF8A;
  --color-sage-muted:    #A8C4A7;

  --color-sand:          #E8DCC8;
  --color-sand-light:    #F2EBE0;
  --color-cream:         #FAF8F5;
  --color-off-white:     #FDFCFA;
  --color-white:         #FFFFFF;

  --color-slate:         #3A3A3C;
  --color-slate-light:   #636366;
  --color-slate-muted:   #8E8E93;
  --color-charcoal:      #1C1C1E;

  --color-accent-gold:   #C4A35A;
  --color-accent-copper: #B87333;
  --color-error:         #D64045;
  --color-success:       #4CAF50;

  /* ── Typography ── */
  --font-display:        'Cormorant Garamond', Georgia, serif;
  --font-body:           'Montserrat', 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;

  --fs-splash:           clamp(3rem, 7vw, 6.5rem);
  --fs-h1:               clamp(2.25rem, 4.5vw, 4rem);
  --fs-h2:               clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3:               clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:               clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:             clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-small:            clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-caption:          0.75rem;

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

  --lh-tight:            1.1;
  --lh-snug:             1.3;
  --lh-normal:           1.6;
  --lh-relaxed:          1.8;

  --ls-tight:           -0.02em;
  --ls-normal:           0;
  --ls-wide:             0.08em;
  --ls-ultra:            0.2em;

  /* ── Spacing Scale (8px base) ── */
  --space-2xs:           0.25rem;   /* 4px */
  --space-xs:            0.5rem;    /* 8px */
  --space-sm:            0.75rem;   /* 12px */
  --space-md:            1rem;      /* 16px */
  --space-lg:            1.5rem;    /* 24px */
  --space-xl:            2rem;      /* 32px */
  --space-2xl:           3rem;      /* 48px */
  --space-3xl:           4rem;      /* 64px */
  --space-4xl:           6rem;      /* 96px */
  --space-5xl:           8rem;      /* 128px */
  --space-section:       clamp(5rem, 10vw, 9rem);

  /* ── Layout ── */
  --max-width:           1280px;
  --max-width-narrow:    900px;
  --max-width-wide:      1440px;
  --gutter:              clamp(1.25rem, 4vw, 3rem);
  --nav-height:          72px;
  --border-radius:       4px;
  --border-radius-md:    8px;
  --border-radius-lg:    16px;
  --border-radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-xs:           0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:           0 2px 8px 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.10);
  --shadow-xl:           0 16px 48px rgba(0,0,0,0.12);
  --shadow-glass:        0 8px 32px rgba(53,94,59,0.08);

  /* ── Transitions ── */
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:       150ms;
  --duration-normal:     300ms;
  --duration-slow:       500ms;
  --duration-glacial:    800ms;

  /* ── Glassmorphism ── */
  --glass-bg:            rgba(253,252,250,0.82);
  --glass-border:        rgba(255,255,255,0.3);
  --glass-blur:          20px;

  /* ── Z-index Scale ── */
  --z-base:              1;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-overlay:           300;
  --z-modal:             400;
  --z-toast:             500;
}