/* ============================================================
   FieldSparc — DESIGN TOKENS v2 (enterprise light / HPE-feel)
   Same variable names as v1 (dark) so every page re-skins from
   here. v1 archived at _archive/tokens-dark-v1.css.
   Feel: white fields, one signature accent (deep teal), amber
   reserved for the phone CTA, squared geometry, quiet depth.
   ============================================================ */
:root {
  /* ---------- PAPER (was INK — ramp inverted to light) ----------
     --ink-850 stays the page bg role; 800/750/700 are surfaces,
     950/900 are the darker paper edges used in gradients. */
  --ink-950:#e8ecee;  --ink-900:#f0f3f5;  --ink-850:#ffffff;  /* page bg */
  --ink-800:#ffffff;  --ink-750:#f6f8f9;  --ink-700:#eef1f3;  --ink-600:#dde3e6;
  --line:#e1e7ea;     --line-soft:#edf1f3;
  --text:#17222c;     --text-dim:#4c5a66;  --text-mute:#7c8994;

  /* ---------- TEAL = the signature (HPE-green role) ---------- */
  --teal-400:#0da183; --teal-500:#0b8f74; --teal-600:#09775f;
  --teal-glow:rgba(11,143,116,.16);

  /* ---------- AMBER = the phone CTA only ---------- */
  --amber-400:#ec8410; --amber-500:#d9730a; --amber-600:#c26307;
  --amber-glow:rgba(217,115,10,.22);

  /* ---------- Semantic ---------- */
  --bg:var(--ink-850); --surface:var(--ink-800); --surface-2:var(--ink-750);
  --primary:var(--teal-500); --accent:var(--amber-500); --on-accent:#ffffff;
  /* dark emphasis band (partners section, footer accents) */
  --band:#f6f8f9; --dark:#0f1d28; --dark-2:#152736;
  --dark-text:#eef3f6; --dark-dim:#9fb2bf; --dark-line:#24394a;

  /* ---------- Type ---------- */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --fs-hero:clamp(2.7rem, 5.4vw + 1rem, 5.6rem);
  --fs-h1:clamp(2rem, 3.6vw + 1rem, 3.6rem);
  --fs-h2:clamp(1.5rem, 2.2vw + .8rem, 2.5rem);
  --fs-h3:clamp(1.15rem, 1.3vw + .6rem, 1.5rem);
  --fs-body:clamp(1rem, .35vw + .92rem, 1.125rem);
  --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.65;
  --track-display:-.02em; --track-eyebrow:.22em;

  /* ---------- Space ---------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --maxw:1220px; --gutter:clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius / depth / motion (squared, quiet) ---------- */
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(18,28,38,.05), 0 10px 28px -18px rgba(18,28,38,.16);
  --shadow-2:0 2px 6px rgba(18,28,38,.06), 0 24px 56px -30px rgba(18,28,38,.24);
  --glow-teal:0 0 0 1px var(--teal-glow), 0 14px 36px -20px var(--teal-glow);
  --glow-amber:0 10px 30px -14px var(--amber-glow);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.35s;

  --mesh:radial-gradient(circle at 1px 1px, rgba(23,34,44,.05) 1px, transparent 0) 0 0/26px 26px;
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} }