:root {
  --color-bg-0: #06080d;
  --color-bg-1: #0b1220;
  --color-bg-2: #10192b;
  --color-panel: rgba(11, 18, 32, 0.86);
  --color-panel-2: rgba(16, 25, 43, 0.86);
  --color-border: rgba(111, 168, 255, 0.16);
  --color-border-strong: rgba(111, 168, 255, 0.32);
  --color-text: #d8e4f7;
  --color-muted: #7f93b3;
  --color-muted-2: #546785;
  --color-primary: #7cc6ff;
  --color-primary-2: #4b8bff;
  --color-success: #38b96c;
  --color-danger: #d35b5b;
  --color-warning: #c58f2a;

  --shadow-soft: 0 20px 70px rgba(0, 0, 0, 0.45);
  --glow-primary: 0 0 30px rgba(124, 198, 255, 0.16);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --type-base: 16px;
  --type-sm: 14px;
  --type-xs: 12px;
  --type-lg: 18px;
  --type-xl: 22px;
  --type-2xl: 28px;
  --type-3xl: 40px;
  --type-display: clamp(2.5rem, 1rem + 5vw, 4.5rem);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}