/* ============================================================
   BASE — Chan Compass · Spectrum 2
   Light, opinionated element defaults. Body uses the canvas
   background and UI type. Helper classes for the few primitives
   that aren't worth a React component.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); letter-spacing: 0; }
h4 { font: var(--type-h4); letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--font-code); font-size: 0.92em; }

::selection { background: var(--accent-subtle); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ---- Eyebrow / overline ---- */
.s2-eyebrow {
  font: var(--font-weight-bold) var(--font-size-50)/1.2 var(--font-sans);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Hairline divider ---- */
.s2-divider {
  border: none;
  border-top: var(--border-width-100) solid var(--border-hairline);
  margin: var(--space-300) 0;
}