/* ============================================================================
   DECKS — design tokens (the single source of truth)
   Built from the Product Experience Bible, not a color list. Rules are encoded
   as comments next to the values so they survive the port into Tailwind/React.
   Decisions: neutral palette (no color accent — white is the accent),
   IBM Plex Sans (humans) + IBM Plex Mono (machines/data/provenance).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  /* — surface ramp (near-black instrument) — */
  --bg:#050506;        /* page */
  --bg-1:#0b0c10;      /* raised card base */
  --bg-2:#101116;      /* panel */

  /* — glass recipe (ONE rule, not 30 inline rgba()s) — */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  --glass-line:rgba(255,255,255,.13);
  --glass-line-strong:rgba(255,255,255,.20);
  --glass-blur:18px;
  --glass-shadow:0 40px 140px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);

  /* — text ramp. READABLE FLOOR ENCODED. Reading copy uses --hi/--mid ONLY;
       --lo/--faint are decorative meta (timestamps, tiny tags) and NEVER carry
       a sentence — esp. on glass, which lightens the backdrop and eats contrast. */
  --hi:#f5f5f7;        /* headings, key values         ~19:1 on bg */
  --mid:#c8c8ce;       /* DEFAULT body & reading copy  ~12:1 / safe on glass */
  --lo:#a0a0a8;        /* secondary labels, captions   ~8:1  (not on glass copy) */
  --faint:#8c8c95;     /* decorative meta only         ~6:1  */

  /* — the one accent: white. No color. (Bible §14: one accent, nothing else.) */
  --accent:#ffffff;
  --on-accent:#050506;

  /* — type — */
  --sans:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --tr-hero:-0.04em;   /* Plex needs looser tracking than the preview's Inter -0.07 */
  --tr-head:-0.035em;

  /* — spacing & radius scales (preview mixed 18/22/24/26/28/29/30 ad hoc) — */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --gap:22px; --section-gap:116px;
  --maxw:1180px;

  /* — MOTION LANGUAGE (Bible §6: animate only a change of understanding) —
       four primitives, each maps to one meaning. Reused everywhere. */
  --ease-reveal:cubic-bezier(.19,1,.22,1);   /* discovery (scanner)         */
  --ease-focus:cubic-bezier(.4,0,.2,1);      /* knowledge (blur→sharp)      */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);/* interaction                 */
  --dur-reveal:5.6s; --dur-focus:.5s; --dur-spring:.35s;

  /* — LIGHT & MATERIAL (depth recipes) —
     Sanctioned cool tint lives ONLY inside light/glow effects (luminance, not
     a brand accent): never on a fill, border, or text. */
  --glow-cool:rgba(80,160,255,.32);
  --beam:0 0 34px rgba(255,255,255,.72), 0 0 96px var(--glow-cool);
  --hairline:rgba(255,255,255,.09);
  /* premium material for a captured operator cell (gloss + bloom + base) */
  --cell-base:linear-gradient(160deg,#1b1e29,#0d0e14);
  --cell-bloom:radial-gradient(120% 80% at 72% 12%,rgba(255,255,255,.14),transparent 44%);
  --cell-sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%);
  --cell-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
}

*{box-sizing:border-box}
/* The margin/padding half of the reset EXEMPTS `.appkit` islands — the subtrees where a landing page
   mounts REAL app components (see `.lv2 .appkit` in landing-v2-extra.css). Those components get their
   spacing from Tailwind utilities, which are single-class (0,1,0) — the same specificity as `.lv2 *`;
   the landing CSS is a lazily-loaded chunk, so it loads LAST and would win every tie, flattening every
   padding in the island. Excluding the island is the only way to let the utilities through.
   If a browser without complex `:not()` support (Safari < 16.4) drops this rule, the page degrades to
   NOTHING VISIBLE: Tailwind's preflight — loaded globally and earlier — already zeroes the margins and
   padding of every element this reset covers (h1-h6, p, ul/ol, figure, blockquote, pre, dl/dd, hr). */
*:not(.appkit *){margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--sans);color:var(--hi);background:var(--bg);
  font-size:16px;line-height:1.5;letter-spacing:-0.01em;overflow-x:hidden;
  /* neutral depth glow at top (blue glow removed per Intelligence Test #5) */
  background-image:radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 30%);
  background-attachment:fixed;
}
/* faint grid — structure, not decoration; fades out so it never competes with copy */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(180deg,#000,transparent 78%)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}