/* ═══ 0 · FOUNDATIONS / TOKENS — Suriva Health ═══
   Re-skins the canonical apex chrome (site.css/chrome.js) onto Suriva's clinical-calm
   teal palette — variable names (--fg-*, --paper, --brand, --haven-*, --green-*) are
   ALIASED here per the estate token-alias method; chrome CSS is never edited directly.
   Light = calm clinical (DEFAULT, matches the brand card: "a calm teal signals trust
   and care") · Dark = the Suriva-in-shell deep-teal canvas. Source: Suriva.dc.html
   prototype tokens + Brand-assets/collateral/collateral-data.js (brand #0f857a). */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ── themeable surfaces + text (LIGHT · default) ── */
  --paper:#F0F5F5; --paper-2:#E3EEEC; --surface:#ffffff;
  --ink-1:#0E211F; --ink-2:#3C534F; --ink-3:#71857F;
  --line:#D9E8E3; --line-strong:#C3DAD3;

  /* ── always-dark surfaces (util strip, deep bands, footer) ── */
  --ink-deep:#0A1818; --ink:#0F2222; --ink-elevated:#152D2D;

  /* ── on-dark text (always) ── */
  --on-dark-1:#F0F5F5; --on-dark-2:rgba(240,245,245,.78); --on-dark-3:rgba(240,245,245,.58);
  --line-on-dark:rgba(240,245,245,.12);

  /* ── accent (Suriva teal) ── */
  --accent:#0f857a;            /* display, fills, borders, buttons */
  --accent-bright:#4DBDBC;     /* dark-theme small text, on-dark eyebrows, focus rings */
  --su-accent-ink:#0b5f5e;     /* THEME-SCOPED small text/links · ~6.7:1 on light paper */

  /* ── semantic roles (canonical names) ── */
  --brand:var(--su-accent-ink);      /* text links, nav, overline → AA on light */
  --brand-strong:#083f3e;            /* link hover (light) */
  --fg-1:var(--ink-1); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --fg-on-dark-1:var(--on-dark-1); --fg-on-dark-2:var(--on-dark-2); --fg-on-dark-3:var(--on-dark-3);
  --bg-1:var(--paper); --bg-2:var(--paper-2); --bg-dark-1:var(--ink-deep); --bg-dark-2:#061010;
  --border-1:var(--line); --border-on-dark:var(--line-on-dark);

  /* ── back-compat aliases for Suriva page components ── */
  --paper-warm:var(--paper-2); --heading:var(--fg-1); --body:var(--fg-2); --muted:var(--fg-3);
  --border:var(--line); --accent-ink:var(--brand);
  --on-dark:var(--on-dark-1); --on-dark-muted:var(--on-dark-2); --on-dark-dim:var(--on-dark-3);
  --teal-50:rgba(15,133,122,.08); --teal-600:#0c6d63; --teal-700:#095551;

  /* ── shared-chrome aliases (chrome CSS speaks haven-/green-/sage-) ── */
  --haven-navy:var(--ink-deep);
  --haven-gradient-deep:linear-gradient(135deg,#0A1818 0%,#0F2222 55%,#152D2D 100%);
  --haven-gradient-primary:linear-gradient(90deg,#0b5f5e 0%,#0f857a 50%,#4DBDBC 100%);
  --haven-gradient-sage:linear-gradient(140deg,#0E211F,#3C534F);
  --green-700:#083f3e; --green-500:var(--accent); --green-300:var(--accent-bright);
  --green-100:rgba(15,133,122,.14); --green-50:rgba(15,133,122,.08);
  --sage-500:var(--accent); --sage-100:rgba(15,133,122,.12);

  /* ── status ── */
  --ok:#2f9d6f; --ok-bg:#e5f4ec; --warn:#8a6d1f; --warn-bg:#f3ecd8;
  --risk:#b23b3b; --risk-bg:#f5e7e4; --info:#3a6ea5; --info-bg:#e6eef6;

  /* ── chrome tokens (theme-aware) ── */
  --chrome-bg:rgba(240,245,245,.82); --chrome-bg-solid:rgba(240,245,245,.96);
  --ctrl-bg:#ffffff; --ctrl-bd:var(--line);

  /* ── type families ── */
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Geist",var(--font-sans); /* display = same family, heavier weight (SaaS register) */
  --font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ── type scale ── */
  --fs-display-xl:88px; --fs-display-lg:66px; --fs-display-md:50px;
  --fs-h1:40px; --fs-h2:32px; --fs-h3:24px; --fs-h4:20px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:12px; --fs-overline:11px;
  --lh-tight:1.05; --lh-snug:1.15; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-display:-.02em; --ls-tight:-.01em; --ls-overline:.2em;

  /* ── spacing (4pt) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ── radii (soft, clinical-calm) ── */
  --r-xs:4px; --r-sm:7px; --r-md:11px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* ── shadows (ink-tinted) ── */
  --shadow-sm:0 1px 2px rgba(14,33,31,.06),0 1px 1px rgba(14,33,31,.04);
  --shadow-md:0 6px 16px rgba(14,33,31,.09),0 2px 5px rgba(14,33,31,.05);
  --shadow-lg:0 18px 44px rgba(14,33,31,.16),0 5px 12px rgba(14,33,31,.08);
  --shadow-glow:0 0 0 4px rgba(15,133,122,.18);

  /* ── motion (Design & Motion Skills - Canonical Standard §1) ── */
  --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-instant:100ms; --dur-fast:180ms; --dur-base:260ms; --dur-slow:400ms; --dur-deliberate:600ms; --dur-cinematic:1200ms;
}

/* ── DARK THEME (Suriva-in-shell deep-teal canvas) ── */
html[data-theme="dark"]{
  --paper:#0A1818; --paper-2:#0F2222; --surface:#152D2D;
  --ink-1:#F0F5F5; --ink-2:rgba(240,245,245,.74); --ink-3:rgba(240,245,245,.56);
  --line:rgba(240,245,245,.1); --line-strong:rgba(240,245,245,.18);
  --fg-1:#F0F5F5; --fg-2:rgba(240,245,245,.74); --fg-3:rgba(240,245,245,.56);
  --bg-1:#0A1818; --bg-2:#0F2222;

  --su-accent-ink:#4DBDBC;              /* bright teal on dark · ≥7:1 */
  --brand:var(--su-accent-ink); --brand-strong:#7fd6d5;
  --green-100:rgba(77,189,188,.16); --green-50:rgba(77,189,188,.1); --green-300:var(--accent-bright);
  --teal-50:rgba(77,189,188,.12);

  --ok:#5fce9c; --ok-bg:rgba(47,157,111,.22);
  --chrome-bg:rgba(10,24,24,.82); --chrome-bg-solid:rgba(10,24,24,.96);
  --ctrl-bg:rgba(255,255,255,.06); --ctrl-bd:rgba(255,255,255,.14);
}