/* ==========================================================================
   DESIGN TOKENS — Ashland Tree Service
   Dark-first luxury arborist system.
   Palette rationale: the source logo is a pure-white wordmark on transparent
   ground (no brand hue to sample), so the palette is derived from the
   arboriculture domain — deep canopy greens, bark browns, and a restrained
   sap-gold accent used at roughly 5% of the visual field.
   ========================================================================== */

:root {
  /* ---------- Core greens ---------- */
  --deep-canopy:  #0A1410;   /* page ground, darkest */
  --canopy-900:   #0F1E17;   /* section ground */
  --canopy-800:   #14291F;   /* raised surface */
  --forest-core:  #1B4332;   /* brand surface */
  --living-moss:  #2D6A4F;   /* buttons, icon fills */
  --fresh-growth: #52B788;   /* hover, highlights */
  --pale-leaf:    #95D5B2;   /* subtle accents on dark */

  /* ---------- Earth + luxury accent ---------- */
  --aged-bark:    #3E2C23;
  --bark-light:   #5C4433;
  --sap-gold:     #C9A227;   /* stars, premium badges, flourishes */
  --gold-bright:  #E3BF4A;
  --gold-soft:    rgba(201, 162, 39, 0.14);

  /* ---------- Neutrals ---------- */
  --bone:         #F7F5F0;
  --mist:         #E8EDE9;
  --ink:          #0A0F0C;
  --slate-sage:   #5A6B60;

  /* ---------- Semantic: dark surfaces (default) ---------- */
  --bg:            var(--deep-canopy);
  --bg-alt:        var(--canopy-900);
  --surface:       var(--canopy-800);
  --surface-glass: rgba(255, 255, 255, 0.045);
  --text:          #EFF3EF;
  --text-muted:    #A8B8AD;
  --text-dim:      #7A8C81;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---------- Semantic: light surfaces ---------- */
  --light-bg:      var(--bone);
  --light-surface: #FFFFFF;
  --light-text:    var(--ink);
  --light-muted:   #4A5A50;
  --light-border:  #D9E2DC;

  /* ---------- Status ---------- */
  --danger:  #E5533D;
  --success: #52B788;
  --whatsapp:#25D366;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(0.688rem, 0.66rem + 0.14vw, 0.813rem);
  --fs-sm:      clamp(0.813rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-base:    clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-lg:      clamp(1.125rem, 1.07rem + 0.28vw, 1.313rem);
  --fs-xl:      clamp(1.375rem, 1.27rem + 0.52vw, 1.75rem);
  --fs-h3:      clamp(1.375rem, 1.22rem + 0.78vw, 1.938rem);
  --fs-h2:      clamp(1.938rem, 1.55rem + 1.94vw, 3.25rem);
  --fs-h1:      clamp(2.5rem, 1.72rem + 3.9vw, 5.25rem);
  --fs-hero:    clamp(2.75rem, 1.6rem + 5.75vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.72;
  --ls-tight: -0.032em;
  --ls-wide:  0.18em;

  /* ---------- Spacing ---------- */
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  3.5rem;
  --sp-9:  5rem;
  --sp-10: 7rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:    clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* ---------- Radius ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------- Layered shadows (always 3-stack) ---------- */
  --sh-sm:
    0 1px 2px rgba(5, 12, 8, 0.28),
    0 2px 6px rgba(5, 12, 8, 0.20),
    0 4px 12px rgba(5, 12, 8, 0.12);
  --sh-md:
    0 2px 4px rgba(5, 12, 8, 0.30),
    0 8px 20px rgba(5, 12, 8, 0.24),
    0 18px 44px rgba(5, 12, 8, 0.18);
  --sh-lg:
    0 4px 8px rgba(5, 12, 8, 0.32),
    0 16px 38px rgba(5, 12, 8, 0.28),
    0 40px 90px rgba(5, 12, 8, 0.24);
  --sh-gold:
    0 2px 6px rgba(201, 162, 39, 0.22),
    0 10px 28px rgba(201, 162, 39, 0.18),
    0 22px 56px rgba(201, 162, 39, 0.10);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ---------- Glass ---------- */
  --glass-blur: blur(20px) saturate(180%);
  --glass-bg:   rgba(20, 41, 31, 0.62);
  --glass-brd:  rgba(255, 255, 255, 0.11);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   180ms;
  --t-base:   280ms;
  --t-slow:   620ms;
  --t-reveal: 860ms;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  20;
  --z-nav:     30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
}

/* Light-section scope: any element with .on-light flips semantic tokens. */
.on-light {
  --bg:            var(--light-bg);
  --bg-alt:        #FFFFFF;
  --surface:       var(--light-surface);
  --surface-glass: rgba(255, 255, 255, 0.86);
  --text:          var(--light-text);
  --text-muted:    var(--light-muted);
  --text-dim:      #6B7A70;
  --border:        var(--light-border);
  --border-strong: #C2CFC7;
  --glass-bg:      rgba(255, 255, 255, 0.82);
  --glass-brd:     rgba(10, 20, 16, 0.10);
  --sh-sm:
    0 1px 2px rgba(16, 32, 24, 0.05),
    0 2px 6px rgba(16, 32, 24, 0.05),
    0 4px 12px rgba(16, 32, 24, 0.04);
  --sh-md:
    0 2px 4px rgba(16, 32, 24, 0.06),
    0 8px 20px rgba(16, 32, 24, 0.07),
    0 18px 44px rgba(16, 32, 24, 0.06);
  --sh-lg:
    0 4px 8px rgba(16, 32, 24, 0.07),
    0 16px 38px rgba(16, 32, 24, 0.09),
    0 40px 90px rgba(16, 32, 24, 0.08);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}