/* ============================================================================
 * AstroNoir — Typography (SSOT)
 * Single source for fonts, sizes, line-heights, weights.
 * Loaded globally via header_d.ejs and header.ejs.
 * To re-skin the entire app, change tokens in :root below.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;700&display=swap');

:root {
  /* ---------- Font families ---------- */
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', 'Cinzel', Georgia, serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'Source Code Pro', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display:  2.5rem;   /* hero / page headline */
  --fs-h1:       1.8rem;
  --fs-h2:       1.4rem;
  --fs-h3:       1.15rem;
  --fs-body:     0.95rem;  /* default UI text */
  --fs-reading:  1.2rem;   /* longform prose (.an-reading-text matches this) */
  --fs-small:    0.8rem;
  --fs-pill:     0.72rem;  /* uppercase labels, chips, sub-pills */
  --fs-meta:     0.78rem;  /* secondary labels, sub-meta */
  --fs-caption:  0.85rem;  /* card captions, helper text */
  --fs-base:     1rem;     /* explicit "100%" UI text */

  /* ---------- Line heights ---------- */
  --lh-tight:    1.2;      /* headings */
  --lh-body:     1.5;      /* default UI */
  --lh-reading:  1.9;      /* longform prose */

  /* ---------- Weights ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    900;
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  /* font-size left to browser default (16px) — view-specific classes pick from --fs-* tokens */
}

/* Headings default to display font + tight line-height. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Mobile reading scale-down (matches astro-ui-system .an-reading-text rule) */
@media (max-width: 640px) {
  :root {
    --fs-reading: 1rem;
    --lh-reading: 1.8;
  }
}

/* ---------- Connection content area (About / Report / Weekly) ---------- */
/* Force consistent reading size regardless of class cascade. */
#dynamic-report-area {
  font-size: var(--fs-reading);
  line-height: var(--lh-reading);
}