/* ============================================================
   BREAKOUT KC - TYPOGRAPHY TOKENS  (2026 refresh)
   Archivo superfamily (expanded widths for display), Space Mono
   for technical labels. Tighter tracking, bigger contrast.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @kind font */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @kind font */
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* @kind font */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* Fluid display sizes - bigger, higher contrast for 2026 */
  --fs-display-1: clamp(3rem, 8vw, 6.5rem);      /* @kind font */
  --fs-display-2: clamp(2.25rem, 5vw, 4rem);     /* @kind font */
  --fs-h1: clamp(2rem, 3.6vw, 3rem);             /* @kind font */
  --fs-h2: clamp(1.5rem, 2.6vw, 2.125rem);       /* @kind font */
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);         /* @kind font */
  --fs-eyebrow: 0.75rem;                          /* @kind font */

  /* Body sizes (Archivo) */
  --fs-lead: 1.25rem; /* @kind font */
  --fs-body: 1.0625rem; /* @kind font */
  --fs-small: 0.875rem; /* @kind font */
  --fs-caption: 0.75rem; /* @kind font */

  /* Line heights */
  --lh-tight: 0.98; /* @kind font */
  --lh-snug: 1.06; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing - display tracks TIGHT now (the 2019 loose tracking is gone);
     mono eyebrows keep a measured spread. */
  --ls-display: -0.022em; /* @kind font */
  --ls-head: -0.012em;    /* @kind font */
  --ls-eyebrow: 0.16em;   /* @kind font */
  --ls-button: 0.04em;    /* @kind font */
  --ls-body: 0;           /* @kind font */

  /* ===== SEMANTIC TYPE ALIASES =====
     'expanded' / 'semi-expanded' keywords drive Archivo's width axis. */
  --type-display: 900 expanded var(--fs-display-1)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-h1: 800 expanded var(--fs-h1)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-h2: 800 semi-expanded var(--fs-h2)/1.08 var(--font-display); /* @kind font */
  --type-room-title: 800 semi-expanded var(--fs-h3)/1.05 var(--font-display); /* @kind font */
  --type-eyebrow: 700 var(--fs-eyebrow)/1.2 var(--font-mono); /* @kind font */
  --type-body: 400 var(--fs-body)/var(--lh-relaxed) var(--font-body); /* @kind font */
  --type-lead: 500 var(--fs-lead)/1.5 var(--font-body); /* @kind font */
  --type-button: 700 var(--fs-small)/1 var(--font-display); /* @kind font */
}