/* ArcFling — design tokens. Generated from tokens/design-tokens.json. */
:root {
  /* ---- colour ---- */
  --color-void: #070A18;
  --color-indigo-900: #0D1228;
  --color-indigo-800: #111735;
  --color-indigo-700: #1A2145;
  --color-city-mid: #29325C;
  --color-city-line: #3D4A85;
  --color-signal-cyan: #41EAD4;
  --color-cyan-dim: #1E8F86;
  --color-electric-blue: #5794FF;
  --color-perfect-amber: #FFCC4D;
  --color-danger-coral: #FF5C7A;
  --color-safe-green: #71E59B;
  --color-interface-white: #F4F7FF;
  --color-ink: #0B0F22;
  --color-on-cyan: #04231F;
  --color-on-amber: #241900;

  /* ---- typography ---- */
  --font-pixel: Silkscreen, "Courier New", monospace;
  --font-ui: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --type-logo: 400 40px/1 var(--font-pixel);
  --type-score-xl: 400 34px/1 var(--font-pixel);
  --type-score: 400 26px/1 var(--font-pixel);
  --type-timer: 400 22px/1 var(--font-pixel);
  --type-screen-title: 400 19px/1.1 var(--font-pixel);
  --type-pixel-label: 700 13px/1 var(--font-pixel);
  --type-pixel-micro: 700 9px/1 var(--font-pixel);
  --type-btn: 700 16px/1.1 var(--font-ui);
  --type-body: 400 13px/1.5 var(--font-ui);
  --type-label: 500 11px/1.4 var(--font-ui);
  --type-mono: 400 12px/1.5 var(--font-mono);

  /* ---- spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ---- sizing ---- */
  --grid-sprite: 16px;
  --grid-ui: 8px;
  --tap-min: 44px;
  --field-w: 390px;
  --field-h: 844px;
  --field-desktop-max: 480px;
  --ground-line: 600px;
  --runner-x: 28%;
  --safe-top: max(calc(env(safe-area-inset-top) + 8px), 44px);
  --safe-bottom: max(calc(env(safe-area-inset-bottom) + 16px), 24px);

  /* ---- corners ---- */
  --corner-0: 0px;
  --corner-notch-8: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --corner-notch-12: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);

  /* ---- glow ---- */
  --glow-signal: 0 0 12px rgba(65, 234, 212, .6);
  --glow-perfect: 0 0 24px rgba(255, 204, 77, .5);
  --glow-danger: inset 0 0 0 5px var(--color-danger-coral);
  --glow-panel: 0 0 22px rgba(65, 234, 212, .2);

  /* ---- elevation ---- */
  --z-sky: 0; --z-city-far: 10; --z-city-mid: 20; --z-actors: 30;
  --z-telegraph: 40; --z-hud: 50; --z-callout: 60; --z-modal: 70;
  --z-toast: 80; --z-focus: 90;

  /* ---- motion ---- */
  --dur-1: 80ms; --dur-2: 140ms; --dur-3: 220ms; --dur-4: 360ms; --dur-5: 600ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-in: cubic-bezier(.6, .05, .9, .4);
  --ease-pixel: steps(2, end);
  --hit-stop: 60ms;
  --invuln: 1200ms;
  --perfect-window: 200ms;
  --perfect-anticipation: 400ms;

  /* ---- HUD scaling (Settings → Larger HUD sets 1.25) ---- */
  --hud-scale: 1;
}

/* Larger HUD accessibility setting */
:root[data-hud="large"] { --hud-scale: 1.25; }

/* High-contrast accessibility setting */
:root[data-contrast="high"] {
  --color-indigo-900: #05070F;
  --color-city-mid: #6B7AB8;
  --color-city-line: #8C9AD4;
  --glow-signal: none;
  --glow-perfect: none;
  --glow-panel: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --hit-stop: 0ms; }
}