/* ============================================================
   HYPERWIND — Design Tokens
   Dark · immersive · monochrome + one electric accent · Swiss grotesque
   ============================================================ */

:root {
  /* — Ink & Paper (cool near-black / off-white, low chroma) — */
  --bg:        oklch(0.15 0.006 260);   /* page background  ~#0a0b0d */
  --bg-deep:   oklch(0.11 0.006 260);   /* deeper wells     ~#060709 */
  --panel:     oklch(0.19 0.007 260);   /* raised surfaces  ~#121317 */
  --line:      oklch(0.30 0.008 260);   /* hairlines        */
  --line-soft: oklch(0.24 0.007 260);

  --paper:     oklch(0.97 0.003 260);   /* primary text     ~#f3f4f6 */
  --paper-dim: oklch(0.74 0.006 260);   /* secondary text   */
  --paper-mute:oklch(0.55 0.008 260);   /* tertiary / meta  */

  /* — Electric accent — single amber (#ffb823) — */
  --accent:      oklch(0.84 0.17 75);    /* amber #ffb823 */
  --accent-deep: oklch(0.74 0.16 70);
  --accent-ink:  oklch(0.20 0.06 70);     /* text on accent */

  /* — Type — */
  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* — Motion — */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.7s;

  /* — Rhythm — */
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }

.hw-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}