/* ============================================================
   WellCore360 — Design Tokens
   Brand-locked palette. Everything on the site derives from here.
   ============================================================ */
:root{
  /* Core brand */
  --navy:#1A1A2E;
  --navy-800:#232340;
  --navy-700:#2c2c50;
  --navy-900:#12121f;
  --orange:#ED8001;
  --orange-600:#d47401;
  --orange-100:#fdecd3;
  --teal:#0D7377;
  --teal-100:#d5eaea;
  --purple:#6D4C8E;
  --purple-100:#e6dcef;

  /* Warm neutrals to sit with the navy */
  --paper:#FBFAF6;
  --surface:#FFFFFF;
  --ink:#1A1A2E;
  --ink-soft:#4c4c60;
  --ink-mute:#7a7a8c;
  --line:#E8E4DA;
  --line-strong:#d7d2c6;
  --on-navy:#F4F3EF;
  --on-navy-soft:#b7b7c9;

  /* Pillar system: one color per pillar, used site-wide */
  --pillar-mind:var(--purple);
  --pillar-body:var(--teal);
  --pillar-wallet:var(--orange);
  --pillar-protection:var(--navy);

  /* Type */
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --fs-eyebrow:0.78rem;
  --fs-sm:0.9rem;
  --fs-body:1.0625rem;
  --fs-lg:1.2rem;
  --fs-h4:1.35rem;
  --fs-h3:clamp(1.5rem,1.1rem + 1.6vw,2rem);
  --fs-h2:clamp(2rem,1.4rem + 2.6vw,3.1rem);
  --fs-h1:clamp(2.6rem,1.6rem + 4.4vw,4.6rem);

  /* Space + shape */
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(26,26,46,.05),0 12px 30px -18px rgba(26,26,46,.28);
  --shadow-lg:0 30px 70px -34px rgba(26,26,46,.45);
  --wrap:1180px;
  --gutter:clamp(1.15rem,3vw,2.5rem);
}