/* OffTheDome design system — dark mode (default and only theme today).
   Every color a component uses must be one of the tokens below, never a literal hex, so a
   future `:root[data-theme="light"]` (or `prefers-color-scheme`) block is a pure CSS addition
   with zero component changes. See docs/design/storytime-ui-refinement.md for the full spec. */

@font-face {
  font-family: 'Sedgwick Ave Display';
  src: url('../fonts/display/SedgwickAveDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Don Graffiti';
  src: url('../fonts/display/DonGraffiti.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --surface-0: #0B0B0F;
  --surface-1: #14141B;
  --surface-2: #1C1C26;
  --surface-3: #262631;
  --surface-border: #33333F;
  --surface-border-strong: #46465A;

  /* text */
  --text-primary: #F5F3EC;
  --text-secondary: #B8B4C4;
  --text-muted: #7A7688;

  /* accents — each tied to one recurring meaning, see design doc */
  --accent-magenta: #FF2E9A;
  --accent-cyan: #20E6D7;
  --accent-gold: #FFC93C;
  --accent-violet: #8B5CF6;
  --accent-lime: #B6FF3C;
  --accent-red: #FF4757;
  --on-accent: #0B0B0F;

  /* type */
  --font-display: 'Sedgwick Ave Display', 'Permanent Marker', cursive;
  --font-tag: 'Don Graffiti', 'Sedgwick Ave Display', cursive;
  --font-body: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Lexend', var(--font-body);

  --size-hero: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem);
  --size-band-label: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  --size-body: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
  --size-meta: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);

  --radius-md: 12px;
  --radius-lg: 18px;
}

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

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-ui);
  margin: 0;
}

a {
  color: var(--accent-cyan);
}

:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 2px;
}