/* ============================================
   STUDIO X37 — TYPOGRAPHY TOKENS
   Display: Syne — off-kilter art-gallery grotesque
   Mono: IBM Plex Mono — control-panel labels, terminal copy
   Body: Space Grotesk — utilitarian body ink
   NOTE: The brand's hand-painted sigil alphabet
   (assets/glyph-alphabet.jpg) has no font file yet —
   these are nearest Google Fonts stand-ins.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---- Families ---- */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Sizes (px) ---- */
  --text-2xs: 10px;   /* hardware micro-labels */
  --text-xs: 12px;    /* mono captions, tags */
  --text-sm: 14px;    /* secondary body */
  --text-md: 16px;    /* body */
  --text-lg: 20px;    /* lead paragraph */
  --text-xl: 28px;    /* section heading */
  --text-2xl: 40px;   /* page heading */
  --text-3xl: 64px;   /* display */
  --text-4xl: 96px;   /* hero display */

  /* ---- Weights ---- */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-display: 800;

  /* ---- Leading ---- */
  --leading-display: 0.96;  /* display lines stack tight */
  --leading-heading: 1.1;
  --leading-body: 1.55;
  --leading-mono: 1.7;

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.18em;  /* uppercase mono labels */
  --tracking-wide: 0.32em;   /* sigil-spaced headers */
}

/* ---- Base element styles ---- */
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* ---- Utility classes shipped with the brand ---- */
.x37-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
  text-transform: uppercase;
}

.x37-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.x37-mono {
  font-family: var(--font-mono);
  line-height: var(--leading-mono);
}