/* Responsibility: root design tokens for colors, type, sizing, motion, and shared dimensions. */

:root {
  --black: #080a0c;
  --off-black: #0f1115;
  --dark: #141820;
  --panel: #1a1f28;
  --border: rgba(255, 255, 255, 0.07);
  --white: #f2f4f0;
  --muted: #6b7280;
  --lime: #c8ff00;
  --lime-dim: rgba(200, 255, 0, 0.1);
  --red: #ff3d57;
  --accent: #00e5ff;
  --accent-dim: rgba(0, 229, 255, 0.1);
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "Space Mono", monospace;
  --nav-h: 74px;
  --text-primary: var(--white);
  --text-secondary: rgba(242, 244, 240, 0.84);
  --text-muted: rgba(222, 226, 234, 0.68);
  --text-soft: rgba(222, 226, 234, 0.5);
  --surface-1: rgba(15, 17, 21, 0.88);
  --surface-2: rgba(20, 24, 32, 0.92);
  --surface-3: rgba(26, 31, 40, 0.96);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(200, 255, 0, 0.24);
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 40px;
  --space-9: 48px;
  --container-lg: 1340px;
  --container-xl: 1620px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 16px 32px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 24px 48px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.34);
  --shadow-lime: 0 18px 50px rgba(200, 255, 0, 0.14);
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);
}