/* Design tokens: brand palette, sizing scale, radii, and responsive breakpoints */
:root {
  /* Palette */
  --color-primary-50: #eef2ff;
  --color-primary-100: #dfe4ff;
  --color-primary-200: #bfc6ff;
  --color-primary-300: #9fa7ff;
  --color-primary-400: #7f88ff;
  --color-primary-500: #5a5dff;
  --color-primary-600: #4345db;
  --color-primary-700: #3132b2;
  --color-secondary-100: #e6fcff;
  --color-secondary-300: #00b8d9;
  --color-secondary-500: #008da6;
  --color-secondary-700: #05617a;
  --color-neutral-0: #0b1021;
  --color-neutral-50: #111832;
  --color-neutral-100: #161f3a;
  --color-neutral-200: #1f2a44;
  --color-neutral-300: #2c3655;
  --color-neutral-500: #4b567a;
  --color-neutral-700: #7d89ad;
  --color-neutral-900: #c5cee2;
  --color-surface-1: #0f172a;
  --color-surface-2: #151f36;
  --color-border: #1f2a44;
  --color-text-primary: #f2f2ff;
  --color-text-secondary: #c5cee2;
  --color-success-500: #36b37e;
  --color-warning-500: #ffab00;
  --color-danger-500: #fe0345;

  /* Brand semantic mapping */
  --color-bg-strong: #000130;
  --color-bg: #00024b;
  --color-bg-muted: #000269;
  --color-surface-base: #0b1021;
  --color-surface: var(--color-neutral-200);
  --color-surface-contrast: #ffffff;
  --color-overlay-30: rgba(0, 0, 0, 0.3);

  --color-text-strong: var(--color-text-primary);
  --color-text: #ffffff;
  --color-text-subtle: #8993a4;
  --color-text-muted: #7a869a;

  --color-primary: var(--color-primary-500);
  --color-primary-soft: var(--color-primary-300);
  --color-accent: #c80f43;
  --color-accent-strong: var(--color-danger-500);

  --color-border-strong: var(--color-border);
  --color-border-muted: #667788;
  --color-border-subtle: #7a869a;

  --color-success: var(--color-success-500);
  --color-warning: #ff991f;
  --color-warning-strong: var(--color-warning-500);

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Elevation */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.25);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.35);
}