/**
 * Ingefy Typography System
 * ========================
 *
 * Visual reference: Fiscal.ai, Koyfin, Stock Analysis
 * Philosophy: density is a feature, not a bug. Hierarchy via weight + color, not size.
 *
 * SEMANTIC CLASS GUIDE
 * --------------------
 * .text-h1     — 28px / 600 / -0.02em  — One per page (route title)
 * .text-h2     — 20px / 600 / -0.01em  — Main sections
 * .text-h3     — 16px / 600            — Sub-sections
 * .text-body   — 14px / 400 / 1.45     — Default body text
 * .text-caption— 12px / 400 / muted    — Secondary info, timestamps
 * .text-label  — 11px / 500 / uppercase— Column headers, section labels
 * .text-numeric— font-mono + tabular-nums — ALL financial data in tables
 * .text-prose  — 17px / serif / 1.7    — ONLY for long-form prose (>200 words)
 *                                         Never use for UI elements.
 *
 * HEADING RULES
 * -------------
 * - Never skip heading levels (h1 → h3 without h2 is forbidden)
 * - Semantics > appearance: use <h2 class="text-h3"> if visual weight should differ
 * - Only ONE h1 per page
 *
 * FONTS
 * -----
 * --font-sans : Inter Tight — UI, body, headings (dense terminal feel)
 * --font-mono : JetBrains Mono — ALL numeric data in tables
 * --font-serif: Source Serif 4 — ONLY long editorial prose (PDF exports, narrative profiles)
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:wght@400;600&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Font families */
  --font-sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-serif: 'Source Serif 4', Georgia, serif;

  /* Font sizes — terminal-like density */
  --text-xs:    11px;  /* line-height: 1.4  */
  --text-sm:    12px;  /* line-height: 1.4  */
  --text-base:  14px;  /* line-height: 1.45 — body default */
  --text-lg:    16px;  /* line-height: 1.4  — h3 */
  --text-xl:    20px;  /* line-height: 1.3  — h2 */
  --text-2xl:   28px;  /* line-height: 1.2  — h1 */
  --text-prose: 17px;  /* line-height: 1.7  — long-form prose */

  /* Letter spacing */
  --tracking-tight:   -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-wide:     0.07em; /* for uppercase labels */
}

/* ── Base Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Default body font to Inter Tight */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Semantic Typography Classes ── */

/**
 * .text-h1
 * Page title — ONE per page.
 * 28px / semibold / -0.02em
 */
.text-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);  /* 28px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter);
}

/**
 * .text-h2
 * Main section titles.
 * 20px / semibold / -0.01em
 */
.text-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);   /* 20px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

/**
 * .text-h3
 * Sub-section titles.
 * 16px / semibold
 */
.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);   /* 16px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/**
 * .text-body
 * Default body text. 14px / normal / 1.45
 */
.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);  /* 14px */
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

/**
 * .text-caption
 * Secondary info, timestamps, meta.
 * 12px / normal / muted color
 */
.text-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);   /* 12px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-muted, #55556a);
}

/**
 * .text-label
 * Column headers, section labels.
 * 11px / medium / uppercase / wide tracking / muted
 *
 * Pattern from Fiscal.ai/Koyfin — omnipresent in financial terminals.
 */
.text-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);   /* 11px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted, #55556a);
}

/**
 * .text-numeric
 * ALL financial data in tables — no exceptions.
 *
 * Uses JetBrains Mono + tabular-nums for decimal alignment.
 * Combine with size classes: <td class="text-body text-numeric">
 *
 * ⚠️  Never format raw numbers with .toFixed() — use lib/format.js instead.
 */
.text-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/**
 * .text-prose
 * ONLY for long-form editorial prose (>200 words continuous reading).
 * Source Serif 4 — PDF exports, narrative profiles, investment dossiers.
 *
 * ❌ NEVER use for UI elements, cards, labels, or short descriptions.
 */
.text-prose {
  font-family: var(--font-serif);
  font-size: var(--text-prose);  /* 17px */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}