/* Dreadnought design tokens v0.1
   Values are pinned by docs/design-spec.md and tests/tokens.test.js.
   Colours are written as the exact hex strings in the spec — never converted. */

:root {
  /* ---- Colour · ground ---- */
  --abyss: #070B10;
  --hull: #0D141B;
  --deck: #131C25;
  --plate: #1C2833;
  --seam: #263544;

  /* ---- Colour · text ---- */
  --foam: #E9EEF2;
  --mist: #B7C4CD;
  --steel: #7C909F;

  /* ---- Colour · signal ---- */
  --signal: #3EDCD2;
  --signal-deep: #1C9C95;
  --signal-hover: #7FEDE6;
  --signal-glow: rgba(62, 220, 210, .35);

  /* ---- Colour · semantic ---- */
  --flare: #E0A83A;

  /* ---- Scrim over film and photography ---- */
  --scrim: linear-gradient(180deg, rgba(7, 11, 16, .1) 0%, transparent 35%, #070B10 100%);

  /* ---- Faces ---- */
  --font-display: "Rajdhani", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* ---- Type scale · desktop 1440 ---- */
  --fs-display-xl: 96px;
  --lh-display-xl: 0.90;
  --fs-h1: 64px;
  --lh-h1: 0.95;
  --fs-h2: 40px;
  --lh-h2: 1.05;
  --fs-h3: 26px;
  --lh-h3: 1.15;
  --tr-h3: 0.04em;
  --fs-lead: 20px;
  --lh-lead: 1.50;
  --fs-body: 16px;
  --lh-body: 1.60;
  --fs-caption: 13px;
  --lh-caption: 1.50;
  --fs-label: 12px;
  --lh-label: 1;
  --tr-label: 0.18em;
  --fs-readout: 32px;
  --lh-readout: 1;
  --tr-readout: -0.01em;

  /* Wordmark and buttons: Rajdhani 600/700, +10% tracking */
  --tr-wordmark: 0.10em;

  /* ---- Spacing · 4px base ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-section: 128px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;  /* hover, tick and rail state */
  --dur-copy: 400ms;  /* film copy and still crossfades */

  /* ---- Shape and structure ---- */
  --radius: 0;
  --hairline: 1px;
  --nav-h: 72px;
  --gutter: 80px;
  --cut: 10px;      /* button / cut-corner chamfer */
  --bracket: 14px;  /* bracket panel corner length */
  --measure: 560px; /* ~7 columns, 60–72 characters */
  --rail-clear: 160px; /* right inset that keeps film copy clear of the stage rail */
  --rail-clear-right: 248px; /* wider inset for right-aligned copy: gutter + widest rail label */

  /* Total scroll length of the film section; the film scrubs across `--film-scroll − 100vh`. */
  --film-scroll: 500vh;
}