/* ===================================================================
   FirmForte — Atmosphere
   -------------------------------------------------------------------
   Subtle background depth: aurora blooms + fine grain. CSS-only.
   Self-contained (own tokens) so it can be tuned or removed without
   touching tokens.css / base.css / sections.css. Loaded last.

   Behind content at negative z-index — never affects text contrast.
   No animation, so prefers-reduced-motion needs nothing special.
   Tuned per theme: blooms read fainter on the near-white light theme,
   so dark carries more colour and more grain. Tune the alphas here.
   =================================================================== */

:root {
  --ff-bloom-a:       rgba(120, 170, 10, 0.13);   /* lime, top-left      */
  --ff-bloom-b:       rgba(70, 120, 210, 0.10);   /* cool azure, bot-right*/
  --ff-bloom-c:       rgba(120, 170, 10, 0.06);   /* soft lime, upper-rt  */
  --ff-band-bloom:    rgba(120, 170, 10, 0.09);   /* tinted bands         */
  --ff-grain-opacity: 0.05;
}
:root[data-theme="dark"] {
  --ff-bloom-a:       rgba(198, 255, 61, 0.18);
  --ff-bloom-b:       rgba(95, 170, 255, 0.14);
  --ff-bloom-c:       rgba(198, 255, 61, 0.07);
  --ff-band-bloom:    rgba(198, 255, 61, 0.11);
  --ff-grain-opacity: 0.08;
}

/* ------- AMBIENT AURORA FIELD -------
   Fixed behind all content; shows through every section that uses the
   default page background (hero, problem, process, etc.). The hero is
   the first screenful, so the strong lime bloom is anchored top-left to
   sit right behind it. A cool counter-hue sits bottom-right and a soft
   lime runs up the right side, so it layers like an aurora rather than
   one flat corner glow. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(72% 60% at 10% 4%,  var(--ff-bloom-a), transparent 60%),
    radial-gradient(64% 60% at 96% 96%, var(--ff-bloom-b), transparent 60%),
    radial-gradient(48% 48% at 82% 26%, var(--ff-bloom-c), transparent 62%);
}

/* ------- FINE GRAIN -------
   Fixed above the blooms, below content. Tiny inline grayscale fractal
   noise (~0.4KB, no file request); removes the banding soft gradients
   show on dark screens and adds a little tactile texture. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--ff-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ------- TINTED BANDS -------
   These sections paint an opaque background (--bg-soft / --bg-warm) that
   covers the ambient field, so give them their own lime bloom.
   `isolation: isolate` scopes the pseudo-element above the band's own
   background but below its content — no markup assumptions, no layout
   shift, no z-index leaking into the rest of the page. */
.services-section,
.pricing-section,
.faq-section,
.audit-section {
  isolation: isolate;
}
.services-section::before,
.pricing-section::before,
.faq-section::before,
.audit-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 66% at 85% -6%, var(--ff-band-bloom), transparent 62%);
}