/* ============================================================================
   BloqBot Typography System  (tokens + .t-* utility classes)
   ----------------------------------------------------------------------------
   Single source of truth for text ROLES across the landing page and its tied
   subpages (public, auth/site-sub). Built in Step 2 of the typography pass.

   PRINCIPLES
   • Zero visual change. Every value below mirrors what the page already renders
     today — the ONE sanctioned exception is `.t-ui-heading` (the approved
     small-title readability recipe, already live on `.wl-flow-title`).
   • Tokens are the source of truth; `.t-*` classes apply the roles.
   • COLOR is mapped PER WORLD via `--t-text-*` aliases (landing / public /
     auth+site-sub keep their own environments — see §1).
   • Named VARIANTS encode genuinely different treatments (section sizes,
     eyebrow styles, button styles, nav weights) instead of flattening them.
   • This file is INERT until elements adopt the classes (migration is separate,
     page-by-page, screenshot-verified).

   OUT OF SCOPE (do not add here): tour.css / dashboard.css, and all
   product-mockup / simulated-UI text (.dashpre-*, .hero-esc-*, .opportunity-*
   internals, .signal-console/scanner/ticket-*, .trade-level-*, .confidence-ring,
   .pulse-*/.news-strip-*, etc.) — that is illustration, not page copy.

   Loaded on: landing (index), public (about/contact/news/getting-started),
   auth+legal (login/waitlist/confirmed/invite/privacy/terms) — NOT tour/dashboard.
   ========================================================================== */

/* ── §1 · Per-world semantic COLOR aliases ─────────────────────────────────
   .t-* classes reference these, so the same class adopts each world's palette.
   Declared default → landing → auth/site-sub → public so that on pages carrying
   multiple world classes (e.g. contact = `site-sub public-site-page`) the public
   mapping wins, matching what those pages render today. */
:root {
  --t-text-primary:   var(--text, #eef4ff);
  --t-text-secondary: rgba(238, 244, 255, 0.72);
  --t-text-muted:     var(--muted, #9aa8ba);
  --t-text-faint:     var(--dim, #5f6d80);
  --t-text-accent:    var(--green, #23d18b);
  /* The standardized eyebrow green is a specific alpha, not the flat accent. */
  --t-eyebrow-fg:     rgba(35, 209, 139, 0.82);
}

body.landing-3d {
  --t-text-primary:   var(--text-strong, rgba(238, 244, 255, 0.96));
  --t-text-secondary: var(--text-body, rgba(210, 225, 235, 0.72));
  --t-text-muted:     rgba(205, 220, 230, 0.6);
  --t-text-faint:     rgba(200, 220, 230, 0.5);
  --t-text-accent:    rgba(35, 209, 139, 0.82);
}

body.auth-site,
body.site-sub {
  /* Cool landing palette — matches values the login/waitlist/confirm pages
     already use (brand rgba(232,240,248,.94), lede rgba(220,230,242,.73)), so
     adopting .t-* is a faithful centralization, not a restyle. */
  --t-text-primary:   rgba(232, 240, 248, 0.94);
  --t-text-secondary: rgba(220, 230, 242, 0.73);
  --t-text-muted:     rgba(205, 220, 230, 0.6);
  --t-text-faint:     rgba(190, 205, 220, 0.5);
  --t-text-accent:    var(--auth-green, #23d18b);
}

/* Public pages CONVERGE to the landing cool off-white hierarchy (2026-07-07),
   not the warmer --public-* palette — so migrated .t-* elements read as the
   same premium site as the landing. Only affects elements that adopt .t-*. */
body.public-site-page {
  --t-text-primary:   rgba(232, 240, 248, 0.92);
  --t-text-secondary: rgba(210, 225, 235, 0.72);
  --t-text-muted:     rgba(205, 220, 230, 0.6);
  --t-text-faint:     rgba(205, 220, 230, 0.5);
  --t-text-accent:    rgba(35, 209, 139, 0.82);
}

/* ── §2 · Role METRIC tokens ────────────────────────────────────────────────
   Canonical (dominant) values. Where a world genuinely differs the metric token
   is remapped inside that world's block (§2b) so the class stays zero-diff. */
:root {
  --t-font-sans: 'Inter', system-ui, sans-serif;
  --t-font-head: 'Manrope', 'Inter', system-ui, sans-serif;
  --t-font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
  /* Standardized eyebrow green (defined here, not in the §1 :root, which some
     parses were dropping). */
  --t-eyebrow-fg: rgba(35, 209, 139, 0.82);

  /* body copy (canonical = landing hero/product copy) */
  --t-body-size: clamp(1rem, 1.12vw, 1.08rem);
  --t-body-lh: 1.6;

  /* muted body shares the body metrics, differs only in color */
}

/* §2b — per-world metric remaps (mirror current values). Declared in the same
   order as §1 (auth/site-sub BEFORE public) so that on pages carrying both
   classes (public pages are `site-sub public-site-page`) the public mapping
   wins the equal-specificity tie via source order. */
body.auth-site,
body.site-sub {
  --t-body-size: clamp(1rem, 1.05vw, 1.1rem);
  --t-body-lh: 1.65;
}
body.public-site-page {
  /* Converged to the landing body scale/leading (was the warmer public value). */
  --t-body-size: clamp(1rem, 1.12vw, 1.08rem);
  --t-body-lh: 1.6;
}

/* ── §3 · ROLE CLASSES ─────────────────────────────────────────────────────
   Each block cites the source elements it mirrors and flags odd ducks that
   should NOT be silently migrated onto it. */

/* NOTE: no !important. Utilities win because each migrated page STRIPS the old
   competing typography from its own CSS (keeping only layout). typography.css
   owns font/size/weight/leading/tracking/color; page CSS owns everything else. */

/* 1 · Hero / page title — display, landing-derived. */
.t-hero {
  font-family: var(--t-font-sans);
  font-size: clamp(2.6rem, 4.4vw, 4.3rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--t-text-primary);
}
/* Larger display hero (e.g. About) — still restrained vs the old 104px. */
.t-hero--xl {
  font-family: var(--t-font-sans);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--t-text-primary);
}
/* Auth brand titles (login/waitlist). */
.t-hero--auth {
  font-family: var(--t-font-sans);
  font-size: clamp(2.75rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--t-text-primary);
}

/* 2 · Section headline — standalone landing-derived size variants.
   t-section 52px · --wide 56px · --compact 48px · --sm ~35px (public sub-sections). */
.t-section {
  font-family: var(--t-font-sans);
  font-size: clamp(2.35rem, 4.2vw, 52px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.048em;
  color: var(--t-text-primary);
}
.t-section--wide {
  font-family: var(--t-font-sans);
  font-size: clamp(2.5rem, 4.6vw, 56px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--t-text-primary);
}
.t-section--compact {
  font-family: var(--t-font-sans);
  font-size: clamp(2.2rem, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--t-text-primary);
}
.t-section--sm {
  font-family: var(--t-font-sans);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--t-text-primary);
}

/* 3 · Card heading — softened weight (650). */
.t-card {
  font-family: var(--t-font-sans);
  font-size: clamp(0.98rem, 1.05vw, 1.0625rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--t-text-primary);
}
.t-card--sm {
  font-family: var(--t-font-sans);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--t-text-primary);
}

/* 4 · Small UI heading — approved soft readability recipe. */
.t-ui-heading {
  font-family: var(--t-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(219, 228, 239, 0.92);
}

/* 5 · Body copy (size/leading world-mapped; color = secondary). */
.t-body {
  font-family: var(--t-font-sans);
  font-size: var(--t-body-size);
  font-weight: 400;
  line-height: var(--t-body-lh);
  color: var(--t-text-secondary);
}
/* Larger intro/lead paragraph. */
.t-body--lead {
  font-family: var(--t-font-sans);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-text-secondary);
}
/* Smaller supporting body (step copy, details, card copy). */
.t-body--sm {
  font-family: var(--t-font-sans);
  font-size: clamp(0.88rem, 0.95vw, 0.94rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-text-secondary);
}

/* 6 · Muted body + caption. */
.t-body-muted {
  font-family: var(--t-font-sans);
  font-size: var(--t-body-size);
  font-weight: 400;
  line-height: var(--t-body-lh);
  color: var(--t-text-muted);
}
.t-caption {
  font-family: var(--t-font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--t-text-muted);
}

/* 7 · Eyebrow labels. */
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-eyebrow-fg);
}
.t-eyebrow--muted { color: var(--t-text-muted); }
.t-eyebrow--mono {
  font-family: var(--t-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
}
.t-eyebrow--pill {
  min-height: 32px;
  padding: 0 15px;
  border: 1px solid rgba(39, 200, 137, 0.2);
  border-radius: 999px;
  background: rgba(30, 190, 132, 0.07);
}
.t-eyebrow--dash::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--t-eyebrow-fg);
}

/* 8 · Buttons — sentence-case Inter (color/bg stay with the page's button). */
.t-button {
  font-family: var(--t-font-sans);
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
}
.t-button--nav {
  font-family: var(--t-font-sans);
  font-size: clamp(0.72rem, 0.78vw, 0.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* 9 · Navigation labels. */
.t-nav {
  font-family: var(--t-font-sans);
  font-size: clamp(0.76rem, 0.72vw, 0.82rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.t-nav--soft { font-weight: 500; }
.t-nav--strong { font-weight: 700; }

/* 10 · Form labels. */
.t-form-label {
  font-family: var(--t-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

/* 11 · Pricing tokens (module stays self-contained in landing-pricing.css). */
:root {
  --t-price-name: clamp(1rem, 1.1vw, 1.0625rem);
  --t-price-figure: clamp(2.375rem, 2.9vw, 2.625rem);
  --t-price-item: clamp(0.8125rem, 0.95vw, 0.875rem);
}

/* 12 · Legal / disclaimer. */
.t-legal {
  font-family: var(--t-font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-text-faint);
}
.t-legal-title {
  font-family: var(--t-font-head);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--t-text-primary);
}
.t-legal-head {
  font-family: var(--t-font-head);
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--t-text-primary);
}