/* Stillwater Sound — design tokens */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-latin-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Color */
  --still-water: #E9EEEC;   /* page background */
  --linen: #F8FAF8;         /* raised surfaces, button text */
  --deep-pool: #1F3A3D;     /* text, links, primary buttons — 10.3:1 */
  --reed: #56675C;          /* secondary text — 5.1:1 */
  --bowl-brass: #B08A4E;    /* decorative only, never text */
  --ember: #8A3A2C;         /* errors and "Full" — 6.6:1 on still water, 7.4:1 on linen */
  --rule: color-mix(in srgb, var(--reed) 35%, transparent);
  --wash: #DFE6E3;          /* hover tint on still water */

  /* Type */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40px → 72px */
  --fs-section: clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem); /* 30px → 36px */
  --fs-sub: 1.5rem;       /* 24px */
  --fs-body: 1.125rem;    /* 18px */
  --fs-control: 1rem;     /* 16px */
  --fs-small: 0.875rem;   /* 14px */

  --lh-hero: 1.05;
  --lh-section: 1.15;
  --lh-sub: 1.3;
  --lh-body: 1.65;
  --lh-control: 1.4;
  --lh-small: 1.5;

  --measure: 64ch;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --page-max: 78rem;

  --radius: 2px;
  --focus: 2px solid var(--deep-pool);
}