/* ─────────────────────────────────────────────────────────────
   The Footnote† — colors_and_type.css
   v0.3 Brand Lock · 2026-05-11

   The system, in one file:
     · Type stack (Playfair + Source Serif + Inter + IBM Plex Mono)
     · Brand constants (mark goldenrod) — same across modes
     · Light theme  (.theme-light)  — destination site / editorial / default
     · Dark theme   (.theme-dark)   — share cards / OG / admin / power tools
     · Semantic display & utility classes (.fn-h1, .fn-kicker, etc.)
     · Ramp + league-data colors

   USE THE TOKENS. Do not hardcode hex inside components.
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* Type — four families, one job each, no substitutions */
  --fn-serif-display: 'Playfair Display', Georgia, serif;   /* @kind font */
  --fn-serif-text:    'Source Serif 4', Georgia, serif;     /* @kind font */
  --fn-sans:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;   /* @kind font */
  --fn-mono:          'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;   /* @kind font */

  /* The Mark — Goldenrod. SAME value in both modes. */
  --fn-mark:          #E8B53C;
  --fn-mark-deep:     #B0832A;   /* mark on cream — `#E8B53C` would vibrate */

  /* League / sport data colors — Bar charts only. Not brand. */
  --fn-league-nba:    #e38952;
  --fn-league-nfl:    #8b4513;
  --fn-league-mlb:    #2e5ea7;
  --fn-league-ncaab:  #d4a017;
  --fn-league-other:  #5a3a7c;
}

/* ───────── Light · destination site / editorial default ───── */
.theme-light {
  --fn-bg:           #FAF3E0;   /* cream paper */
  --fn-surface:      #F1E6C8;   /* card */
  --fn-surface-alt:  #E6D8A8;   /* deeper card */
  --fn-ink:          #1A1814;   /* near-black */
  --fn-muted:        #6E655A;   /* secondary text */
  --fn-rule:         #D4C393;   /* hairline */
  --fn-accent:       #CB8E26;   /* yellow ochre — light-mode primary */
  --fn-accent-deep:  #8A5A14;

  /* Cream callouts inside a light page are INVERTED (dark) */
  --fn-cream:        #19150E;
  --fn-cream-alt:    #221C12;
  --fn-cream-ink:    #F2EADD;
  --fn-cream-muted:  #8A8170;
  --fn-cream-rule:   #3A3328;

  /* 5-step sequential ramp on cream */
  --fn-scale-0: #F0E0A8;
  --fn-scale-1: #D8B85A;
  --fn-scale-2: #B08D2E;
  --fn-scale-3: #8A6420;
  --fn-scale-4: #5A3F0E;
}

/* ───────── Dark · share cards / OG / admin / power tools ──── */
.theme-dark {
  --fn-bg:           #0E0C08;   /* near-black */
  --fn-surface:      #19150E;
  --fn-surface-alt:  #221C12;
  --fn-ink:          #F2EADD;
  --fn-muted:        #8A8170;
  --fn-rule:         #3A3328;
  --fn-accent:       #D4A73E;   /* mustard — dark-mode primary */
  --fn-accent-deep:  #8A6420;

  /* Cream callouts inside a dark page are GENUINELY cream */
  --fn-cream:        #FAF3E0;
  --fn-cream-alt:    #F1E6C8;
  --fn-cream-ink:    #1A1814;
  --fn-cream-muted:  #6E655A;
  --fn-cream-rule:   #D4C393;

  /* 5-step sequential ramp on ink */
  --fn-scale-0: #221C12;
  --fn-scale-1: #4A3A14;
  --fn-scale-2: #8A6420;
  --fn-scale-3: #D4A73E;
  --fn-scale-4: #ECD07A;
}

/* ───────── Base resets ──────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--fn-bg);
  color: var(--fn-ink);
  min-height: 100%;
  font-family: var(--fn-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* ───────── Semantic display classes ─────────────────────── */
/* Hero — the AT³-style big-stat number. Use sparingly. */
.fn-hero-number {
  font-family: var(--fn-serif-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--fn-ink);
}

/* Masthead headline. Italic fragments are .fn-accent-italic. */
.fn-h1 {
  font-family: var(--fn-serif-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -1.4px;
  color: var(--fn-ink);
  margin: 0;
}

/* Section title — sits next to the § numeral */
.fn-h2 {
  font-family: var(--fn-serif-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--fn-ink);
  margin: 0;
}

/* Leaderboard / card title */
.fn-h3 {
  font-family: var(--fn-serif-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: var(--fn-ink);
  margin: 0;
}

/* The italic accent fragment — "by the numbers." */
.fn-accent-italic {
  font-family: var(--fn-serif-display);
  font-style: italic;
  color: var(--fn-accent);
}

/* Body copy — reading text in tables, deks, rows */
.fn-body {
  font-family: var(--fn-serif-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fn-ink);
}

/* The dek — italic editorial sub */
.fn-dek {
  font-family: var(--fn-serif-text);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.1px;
  color: var(--fn-muted);
}

/* THE load-bearing voice — mono kickers, metadata, footnotes */
.fn-kicker {
  font-family: var(--fn-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fn-accent);
}

/* Mono metadata that ISN'T a kicker — dates, runtimes, rank numerals */
.fn-meta {
  font-family: var(--fn-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--fn-muted);
}

/* Methodology line — the footer of every card */
.fn-method {
  font-family: var(--fn-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--fn-muted);
}

/* Entity chip on episode rows */
.fn-chip {
  font-family: var(--fn-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--fn-accent);
  background: var(--fn-bg);
  padding: 3px 8px;
  display: inline-block;
}

/* Pill-style nav item */
.fn-nav-item {
  font-family: var(--fn-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 8px 14px;
  color: var(--fn-ink);
  cursor: pointer;
}
.fn-nav-item--active {
  color: var(--fn-bg);
  background: var(--fn-accent);
}

/* Hairline divider — the rule that holds the page together */
.fn-rule { border-color: var(--fn-rule); }