/* ============================================================================
 * CB FONT THEMES — v684 / 2026-05-22
 *
 * Site-wide font design language with 4 distinct theme personalities.
 * Each theme pairs a display font (h1/h2/hero), a body font (paragraphs),
 * and a monospace/eyebrow font (code, uppercase labels, captions).
 *
 *   data-font-theme="modern"    Manrope + Manrope + IBM Plex Mono   (default)
 *   data-font-theme="editorial" Fraunces + Crimson Pro + IBM Plex Mono
 *   data-font-theme="classic"   Playfair Display + Lora + JetBrains Mono
 *   data-font-theme="mono"      Space Grotesk + Inter + JetBrains Mono
 *
 * Loaded site-wide on CB Study only. NOT loaded by NPTE or Business
 * (AGENTS.md §3.6 — sub-site isolation).
 *
 * Architecture:
 *   1. :root sets default vars (Modern) so the site works even if a user
 *      has no localStorage preference.
 *   2. [data-font-theme="x"] overrides the vars for non-default themes.
 *   3. High-specificity selectors with !important enforce the vars over
 *      hardcoded font-family declarations in theme.css / polish.css / etc.
 *      We DO NOT touch !important rules in cb-theme-ember.css that target
 *      specific elements — those stay as intentional overrides.
 * ========================================================================== */

/* ── DEFAULT TOKENS (Modern theme — what the site looked like before) ──── */
:root {
  --font-display:  'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'IBM Plex Mono', 'SF Mono', Menlo, Monaco, monospace;
  --font-eyebrow:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Per-theme stylistic refinements applied alongside the font swap */
  --font-display-tracking: -0.022em;
  --font-display-weight:   800;
  --font-body-weight:      400;
  --font-body-lineheight:  1.55;
}

/* ── THEME 1 · MODERN — friendly geometric sans (current default) ──────── */
html[data-font-theme="modern"] {
  --font-display:  'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:     'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --font-eyebrow:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --font-display-tracking: -0.022em;
  --font-display-weight:   800;
  --font-body-weight:      400;
  --font-body-lineheight:  1.55;
}

/* ── THEME 2 · EDITORIAL — magazine, long-form reading optimized ───────── */
html[data-font-theme="editorial"] {
  --font-display:  'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:     'Crimson Pro', 'Times New Roman', Georgia, serif;
  --font-mono:     'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --font-eyebrow:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --font-display-tracking: -0.018em;
  --font-display-weight:   700;
  --font-body-weight:      400;
  --font-body-lineheight:  1.6;  /* longer line height for serif comfort */
}

/* ── THEME 3 · CLASSIC — traditional Didone + transitional serif ───────── */
html[data-font-theme="classic"] {
  --font-display:  'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:     'Lora', 'Times New Roman', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'Courier Prime', Courier, monospace;
  --font-eyebrow:  'Lora', Georgia, serif;
  --font-display-tracking: 0;
  --font-display-weight:   700;
  --font-body-weight:      400;
  --font-body-lineheight:  1.62;
}

/* ── THEME 4 · MONO — terminal/data-forward, slight quirk in display ───── */
html[data-font-theme="mono"] {
  --font-display:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-eyebrow:  'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-display-tracking: -0.024em;
  --font-display-weight:   700;
  --font-body-weight:      400;
  --font-body-lineheight:  1.55;
}

/* ────────────────────────────────────────────────────────────────────────
 * APPLY THE TOKENS — high specificity to override hardcoded font-family
 * declarations in theme.css, polish.css, cb-glass.css, etc.
 *
 * The `html[data-font-theme]` prefix has specificity (0,1,1) which beats
 * single-element selectors like `body { font-family: 'Manrope', ... }`.
 * Combined with !important, this reliably overrides hardcoded fonts
 * EXCEPT for !important declarations on the original elements (which
 * are intentional — typically nav buttons and the like in ember theme).
 * ──────────────────────────────────────────────────────────────────── */

html[data-font-theme] body,
html[data-font-theme] p,
html[data-font-theme] li,
html[data-font-theme] td,
html[data-font-theme] th,
html[data-font-theme] input,
html[data-font-theme] textarea,
html[data-font-theme] select,
html[data-font-theme] button,
html[data-font-theme] .land-lead,
html[data-font-theme] .land-section-sub,
html[data-font-theme] .ma-body,
html[data-font-theme] .ma-desc,
html[data-font-theme] .rc2,
html[data-font-theme] .pillar-body,
html[data-font-theme] .land-pillar p {
  font-family: var(--font-body) !important;
  line-height: var(--font-body-lineheight);
}

html[data-font-theme] h1,
html[data-font-theme] h2,
html[data-font-theme] h3,
html[data-font-theme] h4,
html[data-font-theme] h5,
html[data-font-theme] h6,
html[data-font-theme] .display,
html[data-font-theme] .land-hero h1,
html[data-font-theme] .land-section h2,
html[data-font-theme] .price-card h3,
html[data-font-theme] .ma-title,
html[data-font-theme] .module-hero h1,
html[data-font-theme] .module-hero h2,
html[data-font-theme] .ember-card-title,
html[data-font-theme] .land-stat-num {
  font-family: var(--font-display) !important;
  letter-spacing: var(--font-display-tracking);
}

html[data-font-theme] code,
html[data-font-theme] pre,
html[data-font-theme] kbd,
html[data-font-theme] samp,
html[data-font-theme] .mono,
html[data-font-theme] .land-eyebrow,
html[data-font-theme] .land-section-tag,
html[data-font-theme] .land-pillar-num,
html[data-font-theme] .land-trust span,
html[data-font-theme] .price-tag,
html[data-font-theme] .price-yr,
html[data-font-theme] .ember-card-eyebrow,
html[data-font-theme] .ma-eyebrow,
html[data-font-theme] .ma-tag,
html[data-font-theme] .land-stat-label,
html[data-font-theme] [class*="-eyebrow"],
html[data-font-theme] [class*="-mono"] {
  font-family: var(--font-eyebrow) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * PICKER UI — minimal styling for the .font-theme-toggle dropdown.
 * The picker is fully JS-rendered (cb-fonts.js) so most styling is
 * inline. This block only catches edge cases where the JS hasn't run yet.
 * ──────────────────────────────────────────────────────────────────── */
.font-theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.font-theme-toggle:not([data-transformed="1"]) {
  /* Hide picker until JS has built the dropdown — avoids flash of unstyled
     content (FOUC) before cb-fonts.js runs. */
  visibility: hidden;
}

/* Live preview labels inside the dropdown (font names rendered in their own
   font so users see the personality before clicking). */
.font-theme-preview-modern    { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; }
.font-theme-preview-editorial { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
.font-theme-preview-classic   { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
.font-theme-preview-mono      { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }