/* Design tokens. Values only: no selectors beyond :root, no layout. */
:root {
  /* Palette — the six colours the design system allows, nothing else. */
  --coal: #0A0A0B;
  --panel: #16161A;
  --ember-dark: #5C1212;
  --ember: #E10600;
  --paper: #F5F5F5;
  --muted: #A8A8A8;

  /* Derived tints, so components never hand-mix colour. */
  --line: color-mix(in srgb, var(--paper) 14%, transparent);
  --line-hot: color-mix(in srgb, var(--ember-dark) 70%, transparent);
  --glow: color-mix(in srgb, var(--ember) 28%, transparent);
  --ember-soft: color-mix(in srgb, var(--ember) 55%, transparent);
  --scorch: color-mix(in srgb, var(--ember-dark) 45%, transparent);
  --veil: color-mix(in srgb, var(--coal) 82%, transparent);
  --dim: color-mix(in srgb, var(--muted) 70%, transparent);

  /* Layout */
  --form-width: 680px;
  --gutter: 20px;
  --scene-gutter: clamp(28px, 5vw, 192px);
  --scene-gap: clamp(40px, 7vw, 240px);
  --hero-columns: minmax(0, 1.12fr) minmax(0, .88fr);

  /* Z layers — single authority so nothing fights the atmosphere canvas. */
  --z-atmosphere: 0;
  --z-content: 1;
  --z-scanlines: 4;
  --z-header: 5;
  --z-dock: 8;
  --z-entrance: 100;
  --z-devtools: 9999;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-cut: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur-base: .34s;
  --dur-slow: .7s;
  --dur-scene: .9s;

  /* Chrome */
  --radius: 2px;
  --tap: 52px;

  /* Typography. A flat 12px reads fine held in the hand and disappears on a
     desk, because a monitor sits twice as far from the eye. The small end
     therefore starts higher on desktop and keeps scaling from there. */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --body-font: 'Noto Sans TC', system-ui, sans-serif;
  --display-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --number-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Assets */
  --smoke-tile: url('/assets/smoke-tile.png');
  --warn-mark: url('/assets/warn-corner.png');
  --arena: url('/assets/industrial-smoke-v2.webp');

  /* Runtime — written by JS each frame, read by CSS. Defaults are the static case. */
  --ptr-x: .5;
  --ptr-y: .5;
  --ptr-dx: 0;
  --ptr-dy: 0;
  --scroll-home: 0;
  --scroll-blur: 0;
  --glare-x: 50%;
  --glare-y: 50%;
  --env-intensity: .15;
  --env-scarlet: .2;
  --echo-hero-out: 0;
  --echo-prize-out: 0;
}

/* Desktop: the same labels, sized for a monitor instead of a palm. */
@media (min-width: 1024px) {
  :root {
    --text-xs: clamp(14px, 0.34vw + 10.5px, 18px);
    --text-sm: clamp(15px, 0.36vw + 11.3px, 19px);
    --text-md: clamp(16px, 0.40vw + 11.9px, 21px);
  }
}