/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Midnight Pop
   Huge, tight, unapologetic display headlines vs. calm, readable body.
   Display: Bricolage Grotesque · Body: Hanken Grotesk · Mono: Space Mono
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Families ──────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* ── Weights ───────────────────────────────────────────────────────── */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */

  /* ── Display scale (fluid — big on desktop, sane on mobile) ────────── */
  --fs-display-2xl: clamp(3.5rem, 9vw, 8.5rem);   /* @kind font */ /* 56→136 hero */
  --fs-display-xl:  clamp(3rem, 7vw, 6rem);        /* @kind font */ /* 48→96 */
  --fs-display-lg:  clamp(2.5rem, 5vw, 4rem);      /* @kind font */ /* 40→64 */
  --fs-display-md:  clamp(2rem, 3.4vw, 3rem);      /* @kind font */ /* 32→48 */

  /* ── Heading + body steps ──────────────────────────────────────────── */
  --fs-h1:    2rem;     /* @kind font */ /* 32 */
  --fs-h2:    1.5rem;   /* @kind font */ /* 24 */
  --fs-h3:    1.25rem;  /* @kind font */ /* 20 */
  --fs-lg:    1.1875rem;/* @kind font */ /* 19 */
  --fs-body:  1.0625rem;/* @kind font */ /* 17 reading default */
  --fs-sm:    0.9375rem;/* @kind font */ /* 15 */
  --fs-xs:    0.8125rem;/* @kind font */ /* 13 */
  --fs-eyebrow: 0.75rem;/* @kind font */ /* 12 mono label */

  /* ── Line heights ──────────────────────────────────────────────────── */
  --lh-tight:   0.96;  /* @kind font */ /* big display */
  --lh-snug:    1.1;   /* @kind font */ /* sub-display */
  --lh-heading: 1.18;  /* @kind font */
  --lh-body:    1.6;   /* @kind font */ /* calm reading */
  --lh-relaxed: 1.75;  /* @kind font */

  /* ── Letter-spacing ────────────────────────────────────────────────── */
  --ls-display: -0.03em; /* @kind font */ /* tight, unapologetic */
  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0em;      /* @kind font */
  --ls-eyebrow: 0.22em;  /* @kind font */ /* wide-tracked mono caps */

  /* ── Semantic shorthands ───────────────────────────────────────────── */
  --type-hero:    var(--w-bold) var(--fs-display-2xl)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-display: var(--w-bold) var(--fs-display-lg)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-h1:      var(--w-semibold) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-body:    var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
}