/* ============================================================
   BEARSCOPE design tokens — sister brand to Fibric.
   Same family (warm stone, Fraunces + Hanken + Spline Mono, the craft),
   its own accent: a refined DEEP TEAL, scarce + functional. Product
   panels carry a teal-charcoal cast so the accent threads through.
   Risk colors stay functional (red/amber/green) inside the dashboard.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..560&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces — neutral near-white (DevRev design language); teal accent kept */
  --paper:#fbfbfa; --paper-2:#f1f1ef; --paper-3:#e8e8e4; --card:#ffffff;
  --ink:#0a0a09; --ink-2:#3a3a36; --mid:#6c6c66; --faint:#a3a39c; --line:#e7e6e2; --line-2:#dbdad5;

  /* THE accent — a refined DEEP TEAL. Scarce + functional. */
  --acc:#1c5d55;            /* deep teal — the one accent */
  --acc-ink:#ffffff;        /* text on the accent */
  --acc-deep:#143f3a;       /* darker teal for small text on light paper */
  --acc-soft:rgba(28,93,85,.12);    /* faint wash for a highlight cell */
  /* aliases so shared/base styles resolve like the Fibric system */
  --clay:#1c5d55; --clay-deep:#143f3a; --bronze:#c68f49; --grad:linear-gradient(90deg,#1c5d55,#2f7d63);
  --lime:#2f7d63; --green:#2f7d63; --coral:#d8543a; --sky:#3a7a72;

  /* primary action = warm near-black */
  --primary:#18160f; --primary-ink:#f6f4ef;

  /* product-panel (dark dashboard) — teal-charcoal, ties to the accent */
  --panel:#0f1714; --panel-2:#16211d; --panel-3:#1e2a26; --panel-line:#2a3531;
  --panel-ink:#eef2f0; --panel-ink-2:#bdc7c2; --panel-mid:#7f8a85;

  /* cinematic dark family (heroes / dark sections / footer) */
  --night:#0f1714; --night-2:#16211d; --night-3:#1e2a26; --night-line:#2a3531;
  --cream:#eef2f0; --cream-2:#bdc7c2; --cream-3:#7f8a85;

  /* risk + status signals (product UI only) */
  --risk-high:#d8543a; --risk-mid:#d4922e; --ok:#2f7d63;

  /* type — same family as Fibric */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* spacing scale — 8px base + 4px half-step (rem). Every gap snaps to one of these.
     4 .25 · 8 .5 · 12 .75 · 16 1 · 20 1.25 · 24 1.5 · 32 2 · 40 2.5 · 48 3 · 64 4 · 80 5 · 96 6 · 128 8 */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; --sp-32:8rem;

  /* layout */
  --maxw:1200px; --gutter:clamp(1.25rem,5vw,4.5rem);
  --r-pill:999px; --r-card:16px; --r-panel:14px; --r-sm:10px;
  /* layered, hue-tinted elevation (warm ink, one light source from above) */
  --shadow-float:0 1px 2px rgba(20,18,12,.05), 0 8px 18px -6px rgba(20,18,12,.12), 0 22px 48px -22px rgba(20,18,12,.28);
  --shadow-card:0 1px 2px rgba(20,18,12,.04), 0 4px 10px -2px rgba(20,18,12,.06), 0 16px 30px -14px rgba(20,18,12,.13);
  --shadow-panel:0 2px 4px rgba(16,20,18,.05), 0 10px 20px -6px rgba(16,20,18,.12), 0 28px 52px -16px rgba(16,20,18,.22), 0 52px 92px -40px rgba(16,20,18,.34);

  /* fluid type scale */
  --s5:clamp(2.9rem,1.1rem + 7.6vw,7rem);
  --s4:clamp(2.7rem,1.2rem + 6.2vw,6.6rem);
  --s3:clamp(2rem,1.2rem + 3.2vw,3.7rem);
  --s2:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);
  --s1:clamp(1.15rem,1rem + .6vw,1.4rem);
  --s0:clamp(1rem,.96rem + .2vw,1.12rem);
  --sm:.82rem;
}

/* ---- DARK page theme (full-screen dark sections) ---- */
:root[data-theme="dark"], .is-dark{
  --paper:#0f1714; --paper-2:#16211d; --card:#1c2622; --line:#2a3531;
  --ink:#eef2f0; --ink-2:#bdc7c2; --mid:#7f8a85; --faint:#5b6661;
  --primary:#eef2f0; --primary-ink:#16211d;
  --shadow-float:0 24px 60px -22px rgba(0,0,0,.6);
  --shadow-card:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -28px rgba(0,0,0,.5);
}