:root {
  --surface-0: #0a1420;
  --surface-1: #122032;
  --surface-2: #1a2c42;
  --surface-3: #243a54;
  --text-primary: #f2f5fa;
  --text-secondary: #b4c4d6;
  --text-muted: #8aa0b8;
  --text-inverse: #071018;
  --accent: #2b8fff;
  --accent-hover: #1a73e8;
  --accent-ring: rgba(43, 143, 255, 0.35);
  --success: #3dcb7a;
  --success-bg: rgba(61, 203, 122, 0.12);
  --warning: #e8b84a;
  --warning-bg: rgba(232, 184, 74, 0.14);
  --danger: #ef5a5a;
  --danger-bg: rgba(239, 90, 90, 0.14);
  --info: #2b8fff;
  --info-bg: rgba(43, 143, 255, 0.12);
  --border: rgba(148, 176, 214, 0.14);
  --border-strong: rgba(148, 176, 214, 0.26);
  --font-body: "Heebo", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --radius-8: 10px;
  --radius-12: 14px;
  --radius-16: 18px;
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.38);
  --t-fast: 140ms;
  --ease: cubic-bezier(0.22, 0.9, 0.25, 1);
  --topbar-h: 64px;
  --touch: 52px;
  --rail-w: 320px;
  --dock-h: 76px;
  --content-max: 1100px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}