:root {
  --color-night: #0c0910;
  --color-night-deep: #08060b;
  --color-dusk: #1f1628;
  --color-panel: #1d1727;
  --color-panel-raised: #2a2036;
  --color-line: #3d3150;
  --color-sand: #f1e7d6;
  --color-lilac-muted: #a397ae;
  --color-amber: #f2a33a;
  --color-amber-light: #ffd38a;
  --color-rust: #a3301f;
  --color-teal: #4fb3a9;
  --color-red: #e0533d;
  --color-gold: #e8c06a;
  --color-green: #59c9a5;
  --color-black: #000000;
  --color-clear: transparent;

  --color-white: #ffffff;
  --color-amber-deep: #3a2a18;
  --color-amber-pale: #ffe2a8;
  --color-cream: #fff1b8;
  --color-teal-deep: #2f5f5b;
  --color-ink: var(--color-night);
  --color-backdrop: color-mix(in srgb, var(--color-night-deep) 58%, transparent);
  --color-backdrop-strong: color-mix(in srgb, var(--color-night-deep) 80%, transparent);
  --color-backdrop-light: color-mix(in srgb, var(--color-night-deep) 35%, transparent);
  --color-row-stripe: color-mix(in srgb, var(--color-white) 2.5%, transparent);
  --color-stick-fill: color-mix(in srgb, var(--color-sand) 5%, transparent);
  --color-stick-ring: color-mix(in srgb, var(--color-sand) 10%, transparent);
  --color-stick-border: color-mix(in srgb, var(--color-sand) 22%, transparent);
  --color-stick-knob: color-mix(in srgb, var(--color-amber) 35%, transparent);
  --color-stick-knob-active: color-mix(in srgb, var(--color-amber) 75%, transparent);
  --color-touch-button: color-mix(in srgb, var(--color-panel) 42%, transparent);
  --color-touch-border: color-mix(in srgb, var(--color-sand) 40%, transparent);
  --color-touch-pressed: color-mix(in srgb, var(--color-amber) 85%, transparent);
  --color-touch-attack: color-mix(in srgb, var(--color-amber) 30%, transparent);
  --color-touch-attack-border: color-mix(in srgb, var(--color-amber) 95%, transparent);
  --color-touch-heavy: color-mix(in srgb, var(--color-red) 28%, transparent);
  --color-coral: #ff8a6a;
  --color-mint-light: #7fe3cf;
  --color-hero-moss: #5fe8a0;
  --color-hero-firefly: #ffe066;
  --color-hero-antler: #3fe0c0;
  --color-hero-blue: #5aa8ff;
  --color-hero-ember: #ff7a2a;
  --color-hero-bokator: #ffd25a;
  --color-hero-angkor: #f29ab2;
  --color-touch-heavy-border: color-mix(in srgb, var(--color-coral) 90%, transparent);
  --color-touch-jump: color-mix(in srgb, var(--color-teal) 28%, transparent);
  --color-touch-jump-border: color-mix(in srgb, var(--color-mint-light) 90%, transparent);
  --color-touch-ult-ready: color-mix(in srgb, var(--color-gold) 90%, transparent);
  --color-touch-pause: color-mix(in srgb, var(--color-panel) 55%, transparent);
  --color-touch-pause-border: color-mix(in srgb, var(--color-sand) 35%, transparent);

  --color-surface-page-edge: var(--color-night-deep);
  --color-surface-page-glow: var(--color-dusk);
  --color-text: var(--color-sand);
  --color-text-muted: var(--color-lilac-muted);
  --color-accent: var(--color-amber);
  --color-accent-strong: var(--color-amber-light);
  --color-accent-shadow: var(--color-rust);
  --color-danger: var(--color-red);
  --color-border: var(--color-line);
  --color-shadow: var(--color-black);

  --color-dusk-navy: #111c30;
  --color-dusk-violet: #453351;
  --color-dusk-wine: #75363e;
  --color-loader-sky-top: var(--color-night-deep);
  --color-loader-sky: var(--color-dusk-navy);
  --color-loader-sky-low: var(--color-dusk-violet);
  --color-loader-sky-warm: var(--color-dusk-wine);
  --color-loader-water: var(--color-night);

  --font-display: 'Silkscreen', 'Courier New', monospace;

  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;

  --font-size-caption: 0.8125rem;
  --font-size-title-sm: 1.125rem;
  --font-size-game-logo: clamp(34px, 8.5vmin, 84px);
  --font-size-logo-tagline: 0.38em;
  --font-size-game-title: clamp(26px, 6vmin, 52px);
  --font-size-game-button: clamp(14px, 2.4vmin, 19px);
  --font-size-game-stats: clamp(13px, 2.2vmin, 17px);

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-none: 1;
  --leading-logo: 0.95;
  --leading-tight: 1.15;
  --leading-normal: 1.45;

  --tracking-slight: 0.02em;
  --tracking-wide: 0.04em;
  --tracking-medium: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.3em;

  --radius-md: 3px;
  --radius-xl: 8px;
  --radius-round: 50%;

  --shadow-pixel-sm: 2px 2px 0 var(--color-shadow);
  --shadow-pixel-md: 4px 4px 0 var(--color-shadow);
  --shadow-pixel-lg: 6px 6px 0 var(--color-shadow);
  --shadow-pixel-button: 3px 3px 0 var(--color-shadow);
  --shadow-stage:
    0 0 0 1px var(--color-panel),
    0 18px 60px color-mix(in srgb, var(--color-black) 60%, transparent);
  --shadow-knob: 0 0 0 3px color-mix(in srgb, var(--color-black) 25%, transparent);
  --shadow-touch-button: inset 0 -4px 0 color-mix(in srgb, var(--color-black) 25%, transparent);
  --shadow-ult-ready: 0 0 0 6px color-mix(in srgb, var(--color-gold) 45%, transparent);
  --shadow-ult-ready-still: 0 0 0 4px color-mix(in srgb, var(--color-gold) 45%, transparent);

  --text-shadow-pixel-xs: 1px 1px 0 var(--color-shadow);
  --text-shadow-pixel-sm: 2px 2px 0 var(--color-shadow);
  --text-shadow-pixel-md: 3px 3px 0 var(--color-shadow);
  --text-shadow-logo: 3px 3px 0 var(--color-accent-shadow), 6px 6px 0 var(--color-shadow);

  --duration-instant: 60ms;
  --duration-fast: 120ms;
  --duration-quick: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 450ms;
  --duration-logo: 600ms;
  --duration-pulse: 800ms;
  --duration-sprite-idle: 900ms;
  --duration-sprite-win: 600ms;
  --duration-loader-follow: 700ms;
  --duration-sprite-run: 640ms;
  --duration-dust: 320ms;

  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-overshoot: cubic-bezier(0.2, 1.6, 0.4, 1);
  --easing-linear: linear;
  --easing-step-2: steps(2);
  --easing-step-4: steps(4);
  --easing-step-5: steps(5);
  --easing-step-6: steps(6);
  --easing-step-8: steps(8);
  --easing-out: ease-out;

  --layer-overlay: 100;
}