/* ============================================================================
   Lumati Clinic-OS — Design Tokens (single source of truth)
   Linked BEFORE app.css / portal.css / ui.css in every shell.
   Elevated hybrid identity:
     • navy  #0A1F2E  — Lumati house navy, STRUCTURAL (nav, headers, primary)
     • teal  #1A3C40  — retained CLINICAL/WELLNESS accent (status rails, surfaces)
     • gold  #bfa465  — CANONICAL Lumati gold (Labs print gold-standard); single
                        source of truth for screen + print. Replaces the legacy
                        clinic gold #C9A84C / CRM #d4af37 / storefront #c4a35a.
                        On navy = 6.98 (AAA); small gold text on cream uses
                        --gold-ink #7a5e1a (AA 5.57) — the two-token contrast law.
   Surfaces stay warm (cream/off-white). All legacy var names are preserved or
   aliased so existing app.css / portal.css rules resolve unchanged.
   ============================================================================ */
:root {
  /* ── BRAND / STRUCTURAL: house navy ───────────────────────────────────── */
  --navy:#0A1F2E;
  --navy-deep:#06141f;
  --navy-700:#0e2838;
  --navy-600:#143246;
  --navy-300:#3a5468;

  /* ── CLINICAL / WELLNESS ACCENT: teal (retained, unchanged values) ─────── */
  --teal:#1A3C40;
  --teal-deep:#112628;
  --teal-mid:#234d52;
  --teal-light:#2e6269;

  /* ── LUXURY ACCENT: gold ──────────────────────────────────────────────── */
  --gold:#bfa465;                         /* was #C9A84C — CANONICAL print+screen gold */
  --gold-light:#d4c08e;                   /* was #dfc07a — re-hued to the bfa465 family */
  --gold-pale:rgba(191,164,101,0.09);     /* was rgba(201,168,76,…) */
  --gold-ring:rgba(191,164,101,0.55);     /* focus-visible ring, re-hued */
  --gold-ink:#7a5e1a;                     /* UNCHANGED — deepened gold for SMALL text on
                                             light surfaces; the ONLY gold that clears AA
                                             (5.57) for label-size text on cream */

  /* ── SURFACES / INK (warm, retained) ──────────────────────────────────── */
  --cream:#F8F4EE;
  --warm:#fdfaf6;
  --surface:#ffffff;
  --surface-2:#fbf8f3;
  --charcoal:#1e1e1e;
  --mid:#5a5a5a;
  --faint:#8a8a8a;                          /* decorative / large only — fails AA on cream (3.15) */
  --faint-ink:#686868;                      /* SMALL mono micro-labels on light: clears AA at 8–10px
                                               (white 5.57 · cream 5.09 · surface-2 5.26) — the floor
                                               for the .sec-meta/.kv-label/.meter-tick/.conc-* family */

  /* ── BORDERS (both legacy names defined; --bs aliases --border-s) ──────── */
  --border:rgba(191,164,101,0.18);         /* gold-tint (dark surfaces), re-hued */
  --border-s:rgba(26,60,64,0.12);          /* teal-tint (light surfaces, app.css) */
  --bs:var(--border-s);                     /* portal.css legacy alias → de-dupes */
  --border-navy:rgba(10,31,46,0.10);

  /* ── STATUS (with readable ink variants for text/badges) ──────────────── */
  --green:#4ade80; --green-ink:#166534;
  --red:#f87171;   --red-ink:#991b1b;
  --amber:#fbbf24; --amber-ink:#92400e;
  --blue:#63b3ed;  --blue-ink:#1e40af;

  /* ── SPACING (4px base) ───────────────────────────────────────────────── */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* ── RADIUS (matches existing 6/8/10/12/14/16/20 usage) ───────────────── */
  --radius-xs:6px;  --radius-sm:8px;  --radius-md:10px; --radius-lg:12px;
  --radius-xl:14px; --radius-2xl:16px; --radius-pill:20px; --radius-round:50%;

  /* ── SHADOW ───────────────────────────────────────────────────────────── */
  --shadow-sm:0 1px 3px rgba(10,31,46,0.06);
  --shadow-md:0 4px 16px rgba(10,31,46,0.10);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.25);   /* matches existing toast shadow */
  --shadow-ring:0 0 0 3px var(--gold-ring);

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --dur-1:120ms; --dur-2:200ms; --dur-3:300ms; --dur-4:450ms;
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out:cubic-bezier(0.45,0,0.55,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Jost', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs:10px; --text-xs:11px; --text-sm:12px; --text-base:13px;
  --text-md:14px;  --text-lg:17px; --text-xl:22px; --text-2xl:28px;
  --text-3xl:32px; --text-display:42px;

  --tracking-wide:0.1em; --tracking-wider:0.18em; --tracking-widest:0.22em;
  --tracking-eyebrow:0.30em;         /* print eyebrow = 3px @ 8pt ≈ 0.30em (wider than --tracking-widest) */
  --leading-tight:1.3;   --leading-normal:1.6;

  /* ── ILLUMINATION (one source for every light motif — never ad-hoc rgba) ── */
  --glow-1:rgba(191,164,101,0.55);   /* focus aura / single-CTA hover (= --gold-ring) */
  --glow-2:rgba(191,164,101,0.14);   /* statbox/hero wash */
  --glow-3:rgba(191,164,101,0.04);   /* barely-there panel warm */

  /* CLINIC light-spectrum — a CALM teal→gold hairline. DELIBERATELY NOT the Labs
     catalog green→red burden scale (that is a microplastic-BURDEN gradient and must
     NOT be reused as a brand light hairline). */
  --spectrum:linear-gradient(90deg,
     var(--teal-light) 0%, var(--gold) 50%, var(--gold-light) 78%, rgba(191,164,101,0) 100%);

  /* ── MOTION: calm-clinical timing for new brand devices ── */
  --dur-pulse:2.6s;                  /* Live pulse breathes (was hard-coded 2s) */
  --dur-spiral:2.4s;                 /* spiral loader single slow turn */
}