:root {
  color-scheme: dark;

  --font-family-base:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --color-white: #ffffff;
  --color-black: #030610;
  --color-gray-50: #f6f8ff;
  --color-gray-100: #ecf2ff;
  --color-gray-200: #d8e3fb;
  --color-gray-300: #b8c7e7;
  --color-gray-500: #7888aa;
  --color-gray-600: #52617f;
  --color-gray-700: #243452;
  --color-gray-900: #07142d;
  --color-cyan-50: #e9fbff;
  --color-cyan-400: #35d8ff;
  --color-cyan-600: #0899d8;
  --color-violet-500: #8f54ff;
  --color-coral-500: #ff6b79;
  --color-gold-400: #ffc96b;
  --color-rose-50: #fff1f2;
  --color-rose-200: #fecdd3;
  --color-rose-700: #be123c;
  --color-green-50: #f0fdf4;
  --color-green-200: #bbf7d0;
  --color-green-800: #166534;

  --color-bg: #050914;
  --color-surface: rgba(9, 18, 42, 0.86);
  --color-surface-muted: rgba(17, 32, 67, 0.78);
  --color-text: #f7fbff;
  --color-text-muted: #aab8d8;
  --color-border: rgba(82, 208, 255, 0.22);
  --color-primary: var(--color-cyan-400);
  --color-primary-hover: var(--color-gold-400);
  --color-primary-soft: rgba(53, 216, 255, 0.16);
  --color-accent: var(--color-violet-500);
  --color-accent-warm: var(--color-coral-500);
  --color-accent-gold: var(--color-gold-400);
  --color-danger-bg: var(--color-rose-50);
  --color-danger-border: var(--color-rose-200);
  --color-danger-text: var(--color-rose-700);
  --color-success-bg: var(--color-green-50);
  --color-success-border: var(--color-green-200);
  --color-success-text: var(--color-green-800);

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

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.36);

  --duration-fast: 160ms;
  --ease-standard: ease;
  --container-page: 1120px;
}