/* =============================================================
   FLAMEFIX — DESIGN TOKENS v2
   Single source of truth. Import this first, before everything else.
   ============================================================= */

:root {

  /* ---- Brand: Green (structural) ---- */
  --green-display:  #5A8A26;  /* Large type, icons, decorative fills  */
  --green:          #4A7320;  /* DEFAULT — body text, links, bands. 5.58:1 */
  --green-deep:     #3D6117;  /* Hover states, footer. 7.19:1 */
  --green-tint:     #EDF3E2;  /* Badge and callout backgrounds */

  /* ---- Brand: Orange (accent — one moment per section max) ---- */
  --orange-display: #E07A00;  /* Decorative only: icon fills, borders, large numerals. Fails text-contrast — never use for text or under white button text. */
  --orange:         #A85900;  /* DEFAULT — orange text on pale surfaces (5.1:1+), and white-text button fills (5.1:1+) */
  --orange-deep:    #8A4B00;  /* Hover state for both orange text links and --orange button fills */
  --orange-tint:    #FDF0DF;  /* Badge and callout backgrounds */
  --orange-bright:  #FFB84D;  /* Orange TEXT directly on dark green (--green/--green-deep) only — hero accent, footer phone number */

  /* ---- Warm neutrals (faint green undertone) ---- */
  --n-0:   #FFFFFF;
  --n-50:  #F7F8F4;
  --n-100: #F3F4EF;
  --n-200: #E4E6DE;
  --n-300: #C9CCC0;
  --n-500: #8A8E80;
  --n-600: #6B6F63;   /* Muted body, captions. 5.15:1 */
  --n-800: #3A3E33;   /* Secondary headings */
  --n-900: #23261F;   /* Primary text. 15.35:1 */

  /* ---- Semantic tokens ---- */
  --text-primary:    var(--n-900);
  --text-secondary:  var(--n-600);
  --text-on-brand:   #FFFFFF;
  --surface-page:    var(--n-50);
  --surface-card:    var(--n-0);
  --surface-band:    var(--green);      /* carries body copy — NOT green-display */
  --surface-alt:     var(--n-100);
  --border:          var(--n-200);
  --border-strong:   var(--n-300);
  --link:            var(--green);
  --link-hover:      var(--orange);
  --focus-ring:      var(--orange-display);

  /* ---- Typography ---- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale (1.25 major-third, 375px → 1200px) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --fs-lg:   clamp(1.25rem,   0.8vw + 1.1rem, 1.375rem);
  --fs-xl:   clamp(1.5rem,    1.5vw + 1.2rem, 1.75rem);
  --fs-2xl:  clamp(1.875rem,  2.5vw + 1.3rem, 2.25rem);
  --fs-3xl:  clamp(2.25rem,   4vw   + 1.4rem, 3.25rem);

  /* Letter-spacing — tighten as size increases */
  --ls-display: -0.025em;
  --ls-heading: -0.015em;
  --ls-body:     0;
  --ls-caps:     0.09em;   /* Eyebrows, all-caps labels */

  /* Line-height */
  --lh-display: 1.12;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-prose:   1.75;   /* Long-form article content */

  /* Measure caps */
  --measure-prose: 68ch;
  --measure-lead:  52ch;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 8rem;

  /* Consistent vertical rhythm between major sections */
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* ---- Layout ---- */
  --container-max:    1180px;
  --container-prose:  68ch;
  --container-narrow: 34rem;
  --container-pad:    clamp(1.25rem, 5vw, 2.5rem);

  /* ---- Shape / Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;   /* Primary CTA ONLY */

  /* ---- Depth / Shadows (tinted, not black) ---- */
  --shadow-xs:    0 1px 2px rgba(35, 45, 20, 0.05);
  --shadow-card:  0 2px 8px  rgba(35, 45, 20, 0.06),
                  0 1px 2px  rgba(35, 45, 20, 0.04);
  --shadow-hover: 0 8px 24px rgba(35, 45, 20, 0.10),
                  0 2px 6px  rgba(35, 45, 20, 0.06);
  --shadow-cta:   0 4px 14px rgba(224, 122, 0, 0.28);

  /* ---- Motion ---- */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.4, 0.64, 1);  /* CTA hover only */
}

/* Tabular numerals for phone numbers and prices */
.tnum { font-feature-settings: 'tnum' 1; }

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