/*
 * Design tokens.
 *
 * The register is measurement equipment: warm analogue metal, cold digital
 * readout. Corners stop at 4px. Colour is signal: each tier owns one accent
 * and they meet at hard edges, never in a gradient with each other.
 *
 * On blur, the rule has two halves and they are not in conflict:
 *
 *   Blur as DEPTH is forbidden. A panel never floats. Depth comes from a 1px
 *   top highlight over a dark hairline, the way brushed metal catches light.
 *
 *   Blur as EMISSION is required. A glow states "this element is producing
 *   light" and nothing else. See emissive.css.
 *
 * Every element belongs to exactly one material. Metal never glows; an LED
 * never has a bevel.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Surfaces — graphite, never pure black. */
  --base: #0b0c0e;
  --panel: #131519;
  --raised: #1c1f25;
  --hairline: #2a2e36;
  --hairline-soft: #1e222a;
  --below: #08090b;

  /* Text */
  --text: #e8e6e1;
  --text-dim: #9a9da5;

  /* Signal colours. One per tier. */
  --amber: #ff9e3d;
  --cyan: #4dd8e6;
  --magenta: #e85aa0;

  /* Channel triplets, for emissive elements that need `rgb(… / alpha)`.
     SPACE-separated, and that is load-bearing: substituted into the
     slash form these become `rgb(77, 216, 230 / 0.4)`, which is legacy
     comma syntax carrying a slash alpha -- invalid, and one invalid
     component drops the WHOLE property, so `filter` collapses to
     `none`. The failure is silent and reads as a design choice: the
     panels keep their backgrounds and lose every glow. */
  --amber-rgb: 255 158 61;
  --cyan-rgb: 77 216 230;
  --magenta-rgb: 232 90 160;

  /* The accent of the current section. Sections override this locally, so
     every rule below reads --accent and nothing needs a per-tier variant. */
  --accent: var(--cyan);
  --accent-rgb: 77 216 230;

  /* Type */
  --display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --body: 'Instrument Sans', ui-sans-serif, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --t-display-1: clamp(2.75rem, 6vw, 5.5rem);
  --t-display-2: clamp(2rem, 3.6vw, 3.25rem);
  --t-display-3: clamp(1.375rem, 1.9vw, 1.75rem);
  --t-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;

  /* 8px baseline grid. */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  --radius: 4px;
  --rail: 48px;
  --measure: 62ch;
  --page-max: 1360px;

  /* Motion is an envelope, not a spring. Nothing overshoots. */
  --attack: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --release: 180ms cubic-bezier(0.7, 0, 0.84, 0);
}

/* A panel edge: light catches the top, shadow sits under the bottom. */
.panel-edge {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 1px 0 var(--below);
}

/* Silkscreened panel legend. Every label on the page is one of these. */
.legend {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.legend-dim {
  color: var(--text-dim);
}

/* Numerals are instrument readout: mono, tabular, never proportional. */
.readout {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}