/* ═══════════════════════════════════════════════════════════════ */
/*  SAMIZDAT TYPOGRAPHY SYSTEM                                    */
/*  Tokens + canonical .ds-* text classes                         */
/* ═══════════════════════════════════════════════════════════════ */
/*
 * Single source of truth for every text style in the CMS. See
 * CMS_DESIGN_SYSTEM_PLAN.md §5 for the per-component mapping.
 *
 * 10 canonical text styles:
 *   .ds-page-title    1.40em   Page H1 — one per page
 *   .ds-section-title 1.05em   Section/panel H2
 *   .ds-eyebrow       0.78em   Uppercase mini-header (alias of --ds-label-*)
 *   .form-element-title         Form-field labels (root.css, --ds-label-*)
 *   .ds-body          1.00em   Default running text
 *   .ds-meta          0.85em   Subdued meta — timestamps, hints
 *   .ds-micro         0.75em   Footnotes, axis labels, chart legends
 *   .ds-mono          0.85em   Monospace IDs/URLs/cron
 *   .ds-nav-side      0.90em   PageMenu sidebar buttons
 *   .ds-nav-top       0.85em   PageHeader/PageFooter session strip
 *
 * Color is intentionally NOT in the tokens — it depends on the
 * surrounding surface. Default = on dark BODY (light text);
 * .PageBody / .ds-modal / .ds-card override = on light surface.
 */


/* ─── 1. TOKENS ─────────────────────────────────────────────── */

:root {
  /* Form-field label recipe — original, kept for explicit
   * .form-element-title consumption from root.css. */
  --ds-label-font-size: 0.78em;
  --ds-label-font-weight: 600;
  --ds-label-text-transform: uppercase;
  --ds-label-letter-spacing: 0.05em;
  --ds-label-line-height: 1.4;

  /* Page H1 (one per page) */
  --ds-page-title-font-size: 1.4em;
  --ds-page-title-font-weight: 700;
  --ds-page-title-letter-spacing: -0.01em;
  --ds-page-title-line-height: 1.15;

  /* Section H2 */
  --ds-section-title-font-size: 1.05em;
  --ds-section-title-font-weight: 600;
  --ds-section-title-letter-spacing: 0.02em;
  --ds-section-title-line-height: 1.25;

  /* Eyebrow — semantic alias of --ds-label-* */
  --ds-eyebrow-font-size: var(--ds-label-font-size);
  --ds-eyebrow-font-weight: var(--ds-label-font-weight);
  --ds-eyebrow-text-transform: var(--ds-label-text-transform);
  --ds-eyebrow-letter-spacing: var(--ds-label-letter-spacing);
  --ds-eyebrow-line-height: var(--ds-label-line-height);

  /* Body — default; usually unset because BODY already provides it */
  --ds-body-font-size: 1em;
  --ds-body-font-weight: 400;
  --ds-body-line-height: 1.4;

  /* Meta (subdued) */
  --ds-meta-font-size: 0.85em;
  --ds-meta-font-weight: 400;
  --ds-meta-line-height: 1.35;

  /* Micro (smallest legible) */
  --ds-micro-font-size: 0.75em;
  --ds-micro-font-weight: 400;
  --ds-micro-line-height: 1.3;

  /* Mono (slugs, URLs, IDs, cron) */
  --ds-mono-font-size: 0.85em;
  --ds-mono-font-family: 'JetBrains Mono', Menlo, 'Courier New', monospace;
  --ds-mono-line-height: 1.4;

  /* Side-nav button label (PageMenu) */
  --ds-nav-side-font-size: 0.9em;
  --ds-nav-side-font-weight: 500;
  --ds-nav-side-letter-spacing: 0.01em;
  --ds-nav-side-line-height: 1;

  /* Top-strip text (PageHeader, PageFooter) */
  --ds-nav-top-font-size: 0.85em;
  --ds-nav-top-font-weight: 500;
  --ds-nav-top-letter-spacing: 0.01em;
  --ds-nav-top-line-height: 1;

  /* Eyebrow XS variant — for tier/stage/badge chips that need to fit
   * inside a row of micro-controls. Independent ratio because eyebrow
   * itself is already 0.78em; xs needs to drop further to ~0.65em. */
  --ds-eyebrow-xs-font-size: 0.65em;
  --ds-eyebrow-xs-letter-spacing: 0.03em;
}


/* ─── 2. CLASSES ────────────────────────────────────────────── */

.ds-page-title {
  font-size: var(--ds-page-title-font-size);
  font-weight: var(--ds-page-title-font-weight);
  letter-spacing: var(--ds-page-title-letter-spacing);
  line-height: var(--ds-page-title-line-height);
  margin: 0 0 var(--spacerhalf);
  color: var(--text-color-d);
}
.PageBody .ds-page-title,
.ds-modal .ds-page-title,
.ds-card .ds-page-title {
  color: var(--text-color);
}

.ds-section-title {
  font-size: var(--ds-section-title-font-size);
  font-weight: var(--ds-section-title-font-weight);
  letter-spacing: var(--ds-section-title-letter-spacing);
  line-height: var(--ds-section-title-line-height);
  margin: 0;
  color: var(--text-color-d);
}
.PageBody .ds-section-title,
.ds-modal .ds-section-title,
.ds-card .ds-section-title {
  color: var(--text-color);
}

.ds-eyebrow {
  font-size: var(--ds-eyebrow-font-size);
  font-weight: var(--ds-eyebrow-font-weight);
  text-transform: var(--ds-eyebrow-text-transform);
  letter-spacing: var(--ds-eyebrow-letter-spacing);
  line-height: var(--ds-eyebrow-line-height);
  color: var(--text-color-quiet-d);
}
.PageBody .ds-eyebrow,
.ds-modal .ds-eyebrow,
.ds-card .ds-eyebrow {
  color: var(--text-color-quiet);
}
.ds-eyebrow--xs {
  font-size: var(--ds-eyebrow-xs-font-size);
  letter-spacing: var(--ds-eyebrow-xs-letter-spacing);
}

.ds-body {
  font-size: var(--ds-body-font-size);
  font-weight: var(--ds-body-font-weight);
  line-height: var(--ds-body-line-height);
}

.ds-meta {
  font-size: var(--ds-meta-font-size);
  font-weight: var(--ds-meta-font-weight);
  line-height: var(--ds-meta-line-height);
  color: var(--text-color-quiet-d);
}
.PageBody .ds-meta,
.ds-modal .ds-meta,
.ds-card .ds-meta {
  color: var(--text-color-quiet);
}

.ds-micro {
  font-size: var(--ds-micro-font-size);
  font-weight: var(--ds-micro-font-weight);
  line-height: var(--ds-micro-line-height);
  color: var(--text-color-quiet-d);
}
.PageBody .ds-micro,
.ds-modal .ds-micro,
.ds-card .ds-micro {
  color: var(--text-color-quiet);
}

.ds-mono {
  font-family: var(--ds-mono-font-family);
  font-size: var(--ds-mono-font-size);
  line-height: var(--ds-mono-line-height);
  font-variant-numeric: tabular-nums;
}

.ds-nav-side {
  font-size: var(--ds-nav-side-font-size);
  font-weight: var(--ds-nav-side-font-weight);
  letter-spacing: var(--ds-nav-side-letter-spacing);
  line-height: var(--ds-nav-side-line-height);
  color: var(--text-color-d);
}

.ds-nav-top {
  font-size: var(--ds-nav-top-font-size);
  font-weight: var(--ds-nav-top-font-weight);
  letter-spacing: var(--ds-nav-top-letter-spacing);
  line-height: var(--ds-nav-top-line-height);
  color: var(--text-color-d);
}
.ds-nav-top--quiet {
  color: var(--text-color-quiet-d);
}