/* ════════════════════════════════════════════════════════
   THOS Design System — typography.css
   Font loading and typographic scale
   ════════════════════════════════════════════════════════ */

/* ── Font Loading ───────────────────────────────────────
   Production: self-host woff2 files in /static/fonts/
   Development: Google Fonts import below
   ─────────────────────────────────────────────────────── */

/* Self-hosted @font-face (uncomment for production)
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

/* Google Fonts fallback (development only, fails gracefully if offline) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');

/* Graceful degradation: if Montserrat/JetBrains Mono fail to load,
   var(--font-display) falls back to system sans-serif and
   var(--font-mono) falls back to system monospace via the font stacks
   defined in tokens.css. No FOIT — display:swap is set above. */


/* ── Typographic Scale ──────────────────────────────── */

.type-display {
  font-family: var(--font-display);
  font-size: 2rem;          /* 32px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.type-h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;        /* 24px */
  font-weight: 600;
  line-height: 1.3;
}

.type-h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;      /* 18px */
  font-weight: 600;
  line-height: 1.35;
}

.type-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;     /* 15px */
  font-weight: 400;
  line-height: 1.6;
}

.type-body-small {
  font-family: var(--font-body);
  font-size: 0.8125rem;     /* 13px */
  font-weight: 400;
  line-height: 1.5;
}

.type-caption {
  font-family: var(--font-display);
  font-size: 0.6875rem;     /* 11px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-overline {
  font-family: var(--font-display);
  font-size: 0.625rem;      /* 10px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.type-mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.5;
}

/* ── Nav Labels ─────────────────────────────────────── */

.type-nav {
  font-family: var(--font-display);
  font-size: 0.8125rem;     /* 13px */
  font-weight: 500;
  letter-spacing: 0.02em;
}

.type-nav-active {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Button Labels ──────────────────────────────────── */

.type-btn-sm {
  font-family: var(--font-display);
  font-size: 0.75rem;       /* 12px */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.type-btn-md {
  font-family: var(--font-display);
  font-size: 0.8125rem;     /* 13px */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.type-btn-lg {
  font-family: var(--font-display);
  font-size: 0.9375rem;     /* 15px */
  font-weight: 600;
  letter-spacing: 0.02em;
}