/* ============================================================================
   REDDENDA · SHARED DESIGN SYSTEM  —  /assets/reddenda-system.css
   The single source of truth for tokens + the Palantir type scale, extracted
   from MASTER-PLAN.visualSystem + ELEVATION-SPEC-home so all pages stop drifting.

   CONTRACT (binding):
   · Surfaces are monochrome only (--ink / --paper / --paper-2). Cobalt #2B5BFF is
     the ONLY accent and is spent like money — ONE accent word per headline, ONE
     filled CTA per viewport. Instrument colors (--ok/--amber/--threat) live ONLY
     inside data-viz frames, never as a heading.
   · Headlines are Geist weight 400 at EVERY size (large + light + tight IS the
     authority). Headline ink is #1E2124, never pure #000. Dark bands are near-black
     #0A0A0B / #0B0C10, never #000.
   · Self-contained: no @import, no external dependency. Pairs with
     reddenda-motion.css (the four verbs) and reddenda-nav.{css,js}.
   ========================================================================== */

/* ============================ DESIGN TOKENS =============================== */
:root{
  /* — surfaces (monochrome only) — */
  --ink:#0A0A0B;          /* brand/chrome near-black */
  --ink-2:#15161A;
  --ink-bg:#0B0C10;       /* dark SECTION background (faint-blue near-black) */
  --paper:#FFFFFF;
  --paper-2:#F4F5F7;
  --paper-3:#ECEDF0;

  /* — the one accent, spent like money — */
  --cobalt:#2B5BFF;
  --cobalt-700:#1E40D8;
  --cobalt-soft:rgba(43,91,255,.10);

  /* — type ink — */
  --ink-soft:#1E2124;     /* HEADLINE text on white (the Palantir secret — never #000) */
  --paper-head:#EFEFEF;   /* hero H1 on dark — slightly dimmed white softens glare */
  --body-ink:#4A4D55;     /* lead body on white */

  /* — greys — */
  --g-50:#FAFAFB; --g-100:#EDEEF1; --g-300:#C9CCD3;
  --g-500:#7C8089; --g-600:#5A5E66; --g-700:#3A3D44;

  /* — hairline seams (the single most "Palantir" detail) — */
  --line:rgba(10,10,11,.10);
  --line-d:rgba(255,255,255,.12);
  --rule-light:#E6E7EA;
  --rule-dark:#1C1E24;

  /* — instrument signal (ONLY inside .viz / canvas data frames) — */
  --ok:#39D98A; --amber:#FFB23E; --threat:#FF5D5D;

  /* — per-vertical viz accent (tints DATA-VIZ ONLY; chrome stays cobalt) — */
  --ac:#2B5BFF;           /* default; pages override: defense #5B8CFF / finance #2BD4A8 / energy #FFB23E / health #B98CFF */

  /* — fonts — */
  --sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* — PALANTIR TYPE SCALE (weight 400 at every size) — */
  --t-mega:clamp(48px,9vw,132px);      /* used EXACTLY ONCE per page (full-bleed statement) */
  --t-h1:clamp(44px,7vw,96px);         /* hero default */
  --t-h1-word:clamp(56px,11vw,128px);  /* single-word hero clamp (SENTINEL/RECONCILE fills the frame) */
  --t-h2:clamp(34px,5vw,68px);
  --t-h3:clamp(24px,3vw,40px);
  --t-lead:18px;                       /* lead body */
  --t-body:17px;
  --t-eyebrow:11px;
  --t-data:14px;

  /* — rhythm — */
  --maxw:1240px;
  --sec-pad:120px;                     /* desktop section padding */
}
@media(max-width:640px){
  :root{ --sec-pad:78px; }
}

/* ============================== RESET ==================================== */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,canvas,svg,video{ max-width:100%; display:block; }
button{ font:inherit; }

/* HARD RULE: every headline is weight 400, tight, never #000 */
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.035em; line-height:1.0; color:inherit; }
/* CONTRAST SAFETY: headings inherit their section color, so ANY dark section/card that sets
   color:#fff (incl. custom ones like .cascade) gets white headings automatically — no heading
   can ever render near-black on a dark band. Light sections carry --ink-soft (set below). */
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4,
.hero h1,.hero h2,.hero h3,.final h1,.final h2{ color:#fff; }

/* =========================== TYPE SCALE CLASSES ========================== */
.t-mega{ font-size:var(--t-mega); letter-spacing:-.045em; line-height:.94; }
.t-h1{ font-size:var(--t-h1); letter-spacing:-.04em; line-height:1.0; }
.t-h1--word{ font-size:var(--t-h1-word); letter-spacing:-.045em; line-height:.96; }
.t-h2{ font-size:var(--t-h2); letter-spacing:-.03em; line-height:1.04; }
.t-h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.12; }

.lead-p{
  font-family:var(--sans); font-size:var(--t-lead); line-height:1.5;
  color:var(--body-ink); max-width:46ch; letter-spacing:-.005em;
}
.sec--ink .lead-p{ color:rgba(255,255,255,.72); }   /* AA-clean on dark */

/* EYEBROW — one mono label above every section head; cobalt tick prefix */
.eyebrow{
  font-family:var(--mono); font-size:var(--t-eyebrow); line-height:1.6;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-500);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  background:var(--cobalt); box-shadow:0 0 8px rgba(43,91,255,.55);
}
.sec--ink .eyebrow{ color:rgba(255,255,255,.55); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ============================ LAYOUT HELPERS ============================= */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; }
@media(max-width:640px){ .wrap{ padding:0 20px; } }
section{ position:relative; }

/* SECTION BANDS — cinematic dark↔light cadence, 1px hairline at every seam */
.sec{ padding:var(--sec-pad) 0; position:relative; }
.sec--paper{ background:var(--paper); color:var(--ink-soft); border-top:1px solid var(--rule-light); }
.sec--paper-2{ background:var(--paper-2); color:var(--ink-soft); border-top:1px solid var(--rule-light); }
.sec--ink{ background:var(--ink-bg); color:#fff; border-top:1px solid var(--rule-dark); }
.sec--paper h2,.sec--paper-2 h2{ color:var(--ink-soft); }

/* THE .lead — Palantir signature: headline LEFT, one clause RIGHT, baseline-aligned */
.lead{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px 56px;
  align-items:end; margin-bottom:54px;
}
.lead > .lead-aside{ padding-bottom:.35em; }
@media(max-width:860px){
  .lead{ grid-template-columns:1fr; gap:20px; align-items:start; margin-bottom:40px; }
  .lead > .lead-aside{ padding-bottom:0; }
}

/* ============================== BUTTONS ================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 24px; border-radius:3px;
  font-weight:500; font-size:15px; letter-spacing:-.01em; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:transform var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             background var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             border-color var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             color var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.btn .arr{ transition:transform var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }

/* the SINGLE filled cobalt button per viewport */
.btn--p{ background:var(--cobalt); color:#fff; }
.btn--p:hover{ background:var(--cobalt-700); }

/* ghost button — light context */
.btn--ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink-soft); }
/* ghost button — dark context (nav stays white-on-dark, never a 2nd cobalt fill) */
.sec--ink .btn--ghost,.btn--ghost-d{ color:#fff; border-color:rgba(255,255,255,.32); background:transparent; }
.sec--ink .btn--ghost:hover,.btn--ghost-d:hover{ border-color:#fff; background:rgba(255,255,255,.07); }

/* ===================== THE .rb-def ETYMOLOGY CARD ======================= */
/* Scholarly Latin definition card; cobalt left-rule draws down on reveal */
.rb-def{
  position:relative; padding:22px 26px 24px 30px; max-width:560px;
  background:rgba(255,255,255,.02); border:1px solid var(--line-d); border-radius:6px;
}
.sec--paper .rb-def,.sec--paper-2 .rb-def{ background:#fff; border-color:var(--line); }
.rb-def::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cobalt); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-lg,.9s) var(--ease,cubic-bezier(.16,1,.3,1));
}
.rb-def.in::before,.reveal.in .rb-def::before{ transform:scaleY(1); }
.rb-def .rb-word{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--cobalt); text-transform:lowercase; }
.rb-def .rb-pos{ font-family:var(--mono); font-size:12px; color:var(--g-500); margin-left:8px; }
.rb-def .rb-mean{ display:block; margin-top:12px; font-size:19px; line-height:1.4; letter-spacing:-.01em; }
.sec--ink .rb-def .rb-mean{ color:rgba(255,255,255,.9); }
.rb-def .rb-note{ display:block; margin-top:12px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--g-500); letter-spacing:.02em; }

/* ===================== HONESTY CHROME (shared, DRY) ===================== */
/* Status taxonomy — exactly four labels. Never invent a fifth. */
.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; border:1px solid currentColor; line-height:1;
}
.status i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.status--live{ color:var(--cobalt); }                 /* Healthcare ONLY */
.status--dev{ color:var(--g-500); }                   /* OFFERING · IN DEVELOPMENT (Defense/Finance/Energy) */
.status--illus{ color:var(--amber); }                 /* DESIGN-INTENT / ILLUSTRATIVE (every dashboard/showcase) */
.status--opp{ color:var(--g-500); }                   /* DOCUMENTED-OPPORTUNITY (cite a public source inline) */
.sec--ink .status--dev,.sec--ink .status--opp{ color:rgba(255,255,255,.6); }

/* per-figure caption — every number is captioned or it doesn't ship */
.illus-cap{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--g-500); margin-top:10px; }
.sec--ink .illus-cap{ color:rgba(255,255,255,.42); }

/* human-in-the-loop ledger line (the single most trust-building frame) */
.human-gate{
  display:inline-flex; align-items:center; gap:11px;
  border:1px solid var(--cobalt); border-radius:5px; padding:12px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--cobalt);
  background:rgba(43,91,255,.06);
}
.human-gate i{ width:9px; height:9px; border-radius:50%; background:var(--cobalt); flex:0 0 auto; box-shadow:0 0 9px var(--cobalt); }

/* ============== DATA-VIZ FRAME — the ONLY place instrument color lives === */
.viz{
  position:relative; border:1px solid var(--line-d); border-radius:8px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#0d1530,#070a14 72%);
  aspect-ratio:16/10; box-shadow:0 30px 80px -34px rgba(0,0,0,.7);
}
@media(max-width:520px){ .viz{ aspect-ratio:4/3; } }
.viz canvas{ position:absolute; inset:0; width:100%; height:100%; }
.viz .viz-hud{ position:absolute; inset:0; pointer-events:none; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.55); letter-spacing:.06em; }
.viz-hud .tl{ position:absolute; top:11px; left:13px; }
.viz-hud .tr{ position:absolute; top:11px; right:13px; text-align:right; }
.viz-hud .bl{ position:absolute; bottom:11px; left:13px; }

/* ============================ FOCUS / A11Y ============================== */
:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; border-radius:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--cobalt); color:#fff; padding:10px 16px; border-radius:0 0 4px 0; }
.skip:focus{ left:0; }

/* tap-target floor — every interactive control ≥44px (binding) */
.tap{ min-width:44px; min-height:44px; }