/**
 * Typography — canonical font trio for the platform.
 *
 * Display:  Fraunces       (variable serif, opsz + wght, dramatic at display sizes)
 * Body:     Source Serif 4 (variable serif, editorial-grade, readable at 14-20px)
 * Mono:     JetBrains Mono (structural labels, IDs, mono data)
 *
 * Font-family variables (--font-display, --font-body, --font-mono) and
 * opsz axis defaults are defined in tokens.css. This file consumes them
 * and applies the base element rules.
 *
 * See docs/design/architecture/frontend-visual-system.md for the discipline
 * around when to use which family and the in-app type scale.
 *
 * Fonts are loaded from Google Fonts CDN in index.html. Site CSP already
 * allows fonts.googleapis.com (style-src) and fonts.gstatic.com (font-src).
 */

/* ---------------------------------------------------------------------------
   Base body — editorial serif. Single source of truth, every other CSS file
   should inherit from here rather than re-declaring font-family.
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "liga", "kern";
  font-optical-sizing: auto;
  font-variation-settings: "opsz" var(--body-opsz);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   Headings — Fraunces with variable opsz tuned to size.
   Smaller headings use smaller opsz for better on-screen rendering.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

h1 {
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-variation-settings: "opsz" 72, "SOFT" 25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3 {
  font-variation-settings: "opsz" 48, "SOFT" 20;
  font-weight: 700;
}

h4 {
  font-variation-settings: "opsz" 24, "SOFT" 15;
  font-weight: 600;
}

h5, h6 {
  font-variation-settings: "opsz" 18, "SOFT" 10;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Structural labels — mono caps for the "tool that cares about rules" voice.
   Use the .label class for breadcrumbs, table headers, metadata, section
   eyebrows, badge text, form field labels.
   --------------------------------------------------------------------------- */
.label,
.page-eyebrow,
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Breadcrumbs — mono, quieter than .label */
.breadcrumbs,
.breadcrumbs a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Admin table headers get the mono treatment */
.admin-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Mono utility — for code, system IDs, inline technical values.
   --------------------------------------------------------------------------- */
code,
kbd,
samp,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------------------------------------------------------------------------
   Buttons — mono for structural voice, matches the landing page discipline.
   This is scoped to the shared .button class to avoid touching every
   bespoke button variant. Inputs and selects keep inheriting from body.
   --------------------------------------------------------------------------- */
.button,
button.button,
a.button {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Small-button variant keeps the same family, tighter spacing */
.button.small {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
   Preserve the Fasthand wordmark style class (unused on the main header
   which renders the SVG, but still referenced elsewhere).
   --------------------------------------------------------------------------- */
.site-title {
  font-family: "Fasthand", cursive;
}