/* leoyrh.com v3 — design tokens
 * --------------------------------------------------------------
 * Philosophy: void canvas, atmospheric layer, reverse-out type.
 * Single 14px body system + one massive display moment.
 * Time-modulated accent comes from the WebGL aurora — there is
 * no static brand color.
 * -------------------------------------------------------------- */

:root {
  /* Canvas — near-black, slightly cooler than #000 so the aurora
     reads through the edges instead of clipping to pure void. */
  --canvas: #06070A;
  --canvas-pure: #000000;

  /* Foreground — warm-bias whites and grays so reverse-out type
     doesn't fight the aurora's cool tones. Saturation kept ~0. */
  --fg: #F4F2EE;
  --fg-dim: #9A9893;
  --fg-faint: #545350;
  --rule: rgba(244, 242, 238, 0.08);
  --rule-strong: rgba(244, 242, 238, 0.18);

  /* Type — Migra Display (anchor only) + Erode (body) + JetBrains Mono.
     14px-only body scale; one wordmark breaks the rule. */
  --font-display: "Migra", "PP Editorial New", "Times New Roman", serif;
  --font-body: "Erode", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;

  --text-base: 14px;        /* the entire body scale */
  --text-tiny: 11px;        /* labels, coordinates only */
  --text-display: clamp(96px, 18vw, 280px);
  --leading-tight: 0.92;
  --leading-body: 1.55;
  --tracking-tight: -0.02em;
  --tracking-loose: 0.14em; /* labels */
  --tracking-display: -0.04em;

  /* Motion — Drake/Material ramp + ease-out-quint everything. */
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 450ms;
  --t-atmos: 750ms;
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max-w: 1440px;

  /* Reserved aurora hue (set live from JS based on local hour). */
  --aurora-hue: 220;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-atmos: 0ms;
  }
}