/* ═══════════════════════════════════════════════════════════════════════════
   STEADY WEB — DESIGN TOKENS. The single source of truth.

   Every Steady web surface reads its colours, type, and motion from this file:
   the React landing (src/GlassLanding.tsx, scoped .sx) and the static pages
   (features, labs, terms, privacy, contact). Nothing else may declare these.

   WHY: these tokens used to be redeclared in EIGHT places, so each page drifted
   independently — that is what produced mismatched footers, fonts that did not
   match the homepage, and sections rendering as different blacks. One file kills
   that whole class of bug.

   Selector note: `:root` serves the static HTML pages; `.sx` serves the React
   landing, which is deliberately scoped so the legacy app stylesheet
   (src/index.css) cannot bleed into it. Both get identical values.

   RULES (see also the landing's own conventions):
   · one uniform pitch-black canvas — no background/radial glows
   · sections are separated by spacing, never divider lines
   · green is reserved for market/live semantics, never brand decoration
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
.sx {
  /* ── canvas ── */
  --bg: #000000;

  /* ── ink ramp ── */
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.4);
  --ink-4: rgba(255, 255, 255, 0.16);
  --muted: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.34);
  --ink-dim: rgba(255, 255, 255, 0.72); /* legacy alias of --ink-2 */

  /* ── hairlines ── */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.055);
  --line-lit: rgba(255, 255, 255, 0.26);

  /* ── glass surfaces ── */
  --panel: rgba(255, 255, 255, 0.02);
  --panel-2: rgba(255, 255, 255, 0.04); /* legal pages layer panel-2 over panel */
  --card: rgba(255, 255, 255, 0.028);
  --card-lit: rgba(255, 255, 255, 0.05);

  /* ── market semantics (never brand decoration) ── */
  --green: #35de8f;
  --accent: #35de8f; /* alias: static pages call it --accent */
  --red: #f6566a;
  --amber: #f2b23e;

  /* ── type ── */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Barlow', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── motion ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── RHYTHM ──────────────────────────────────────────────────────────────
     Generous, and identical on every page, so the whole site breathes at one
     tempo. Premium fintech reads premium mostly because of restraint and
     spacing discipline, not decoration. Sections are separated by this space
     alone — never by divider lines. */
  --space-section: clamp(5rem, 12vh, 8rem); /* between major sections */
  --space-head: clamp(2.2rem, 4.5vw, 3.4rem); /* headline block → its content */
  --space-block: clamp(1.4rem, 3vw, 2.2rem); /* inside a block */

  /* ── TYPE SCALE ──────────────────────────────────────────────────────────
     One hierarchy sitewide. The jump from headline to body is deliberately
     large: the headline carries the idea, the body stays quiet and narrow. */
  --fs-display: clamp(2.6rem, 6vw, 4.6rem); /* closing statement */
  --fs-h1: clamp(2.2rem, 4.8vw, 3.6rem); /* section headline (sans 600, tight) */
  --fs-h2: clamp(1.8rem, 3.4vw, 2.7rem); /* sub-page section headline */
  --fs-body: clamp(1rem, 1.6vw, 1.18rem); /* lede / section sub */
  --fs-eyebrow: 0.72rem;

  /* body copy never runs wider than this — long lines read cheap */
  --measure: 46ch;
}