/* Design tokens — sampled from the real assets. BRIEF.md §4.
   Dark theme (user decision, 2026-09-25): the whole site is black with light text.
   The names are kept from the brief, but --paper is now the black page background
   and --ink-900 the off-white text. Paper and void bands both read as black. */
:root {
  color-scheme: dark;
  /* base */
  --paper:        #0A0A0A;   /* page background */
  --ink-900:      #F2F1EF;   /* primary text */
  --ink-700:      #2A2A2A;   /* raised dark surfaces */
  --concrete-300: #2E2E2E;   /* hairlines, disabled states, hover fills */
  --concrete-500: #B8B8B8;   /* secondary text */
  --concrete-700: #8C8C8C;   /* meta text, strong rules */
  --void:         #0A0A0A;   /* dark band background; also text on coral / cream */

  /* accent */
  --peach:        #D7A58A;   /* ambient: washes, large graphics, DAW imagery */
  --coral:        #FF945C;   /* ACTION ONLY — max 3 per viewport: primary CTA, active nav, link hover, play */
  --coral-press:  #E87B42;
  --cream:        #FFE5C2;   /* audio UI: waveforms, playheads */

  /* geometry */
  --radius:  0;      /* no rounded corners anywhere on this site */
  --gutter:  16px;   /* mobile side gutter, never less */
  --measure: 64ch;

  /* spacing — 8px base scale */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 160px;

  --band-pad: var(--s-7);
  --nav-h: 64px;
  --max-w: 1280px;

  /* type scale (desktop; mobile overrides below) */
  --fs-display: 72px;
  --fs-h1:      48px;
  --fs-h2:      32px;
  --fs-h3:      20px;
  --fs-body:    17px;
  --fs-quote:   24px;
  --fs-ui:      15px;
  --fs-meta:    13px;
}

@media (max-width: 767px) {
  :root {
    --band-pad: var(--s-6);
    --nav-h: 56px;
    --fs-display: 40px;
    --fs-h1:      32px;
    --fs-h2:      24px;
    --fs-h3:      18px;
    --fs-body:    16px;
    --fs-quote:   20px;
  }
}