/* ============================================================
   They Are Not The Same — typography
   Loads Source Serif 4 (body/headlines) + Atkinson Hyperlegible (UI)
   via Google Fonts. Total payload: ~80KB woff2, cached aggressively.
   ============================================================ */

/* Google Fonts are loaded via <link> tags in base.html / login.html
   with preconnect, so no @import here (avoids render-blocking + duplicate request). */

:root {
  /* The two stacks — use these anywhere you'd set font-family */
  --tants-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --tants-font-sans:  'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tants-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ============================================================
   Baseline element rules — how the two fonts get distributed
   ============================================================ */

body {
  font-family: var(--tants-font-serif);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines: serif, medium weight (500) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tants-font-serif);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

/* UI / metadata / kickers: sans (Atkinson) */
.kicker,
.section-header,
.meta, .byline, time,
nav, .nav,
button, .btn,
input, select, textarea,
.tag, .badge, .pill,
figcaption,
.tooltip {
  font-family: var(--tants-font-sans);
}

/* Article deck — italic serif for editorial feel */
.deck {
  font-family: var(--tants-font-serif);
  font-style: italic;
  font-size: 1.2em;
  font-weight: 400;
}

/* Body paragraphs — slight optical adjustments */
article p,
.prose p {
  font-family: var(--tants-font-serif);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 1.2em;
}

/* Pull quotes — italic serif, larger */
blockquote, .pullquote {
  font-family: var(--tants-font-serif);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.5;
}

/* Code / preformatted */
code, pre, kbd, samp {
  font-family: var(--tants-font-mono);
  font-size: 0.92em;
}

/* ============================================================
   Performance note:
   - Use font-display: swap (already in the URL above) so text
     renders immediately in Georgia, then swaps to Source Serif
     when loaded. No invisible-text flash.
   - Self-host via @fontsource/* npm packages if you want zero
     third-party dependency. Same files, served from your domain.
   ============================================================ */