/* ============================================================
   03-typography.css — Font Loading + Scale
   Display: Local graffiti/handwriting fonts + Google fallbacks
   UI: Inter (clean, readable)
   Mono: JetBrains Mono
   ============================================================ */

/* ── Local custom fonts (from assets/fonts/) ──────────────── */
@font-face {
  font-family: 'A Dripping Marker';
  src: url('../assets/fonts/adrip1.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinbrows';
  src: url('../assets/fonts/Cinbrows.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hesorder';
  src: url('../assets/fonts/Hesorder.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sister Spray';
  src: url('../assets/fonts/Sister Spray.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Wickhop';
  src: url('../assets/fonts/wickhop-handwriting.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ── Google Fonts (fallback options + UI) ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* JetBrains Mono loaded via Google Fonts fallback in the import above */

/* ── Base ────────────────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

body {
  font-feature-settings: 'liga' 1, 'kern' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ────────────────────────────────────────────────
   Display font for all headings. All caps, tight line height.
   ──────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl)); }
h2 { font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl)); }
h3 { font-size: var(--font-size-lg); letter-spacing: 0.03em; }

/* ── Section titles (Bebas, 2rem, 0.1em tracking) ─────────── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}

/* ── Body Copy ───────────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

p {
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: 72ch;
}

/* ── Utility Classes ─────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.text-xs    { font-size: var(--font-size-xs); }
.text-sm    { font-size: var(--font-size-sm); }
.text-md    { font-size: var(--font-size-md); }
.text-lg    { font-size: var(--font-size-lg); }
.text-xl    { font-size: var(--font-size-xl); }

.font-display { font-family: var(--font-display) !important; letter-spacing: 0.05em; text-transform: uppercase; }
.font-mono    { font-family: var(--font-mono); font-size: 0.875em; }

.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-accent  { color: var(--color-accent); }
.text-blue    { color: var(--color-accent-blue); }
.text-gold    { color: var(--color-accent-gold); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; }
.tracking-sm  { letter-spacing: 0.05em; }
.tracking-md  { letter-spacing: 0.08em; }
.tracking-lg  { letter-spacing: 0.12em; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Code ────────────────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--color-accent);
}

/* ── Section label (small caps, mono) ───────────────────────
   Used above grids as sub-heading.
   ──────────────────────────────────────────────────────────── */

.label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}