:root {
  --color-bg: #0b0e14;
  --color-bg-elevated: #101624;
  --color-surface: rgba(20, 30, 48, 0.62);
  --color-surface-strong: rgba(24, 35, 57, 0.84);
  --color-border: rgba(202, 220, 255, 0.14);
  --color-text-primary: #ecf1ff;
  --color-text-secondary: #afbddb;
  --color-accent: #50c878;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 24%, transparent);

  --theme-color: #50c878;
  --theme-border: color-mix(in srgb, var(--theme-color) 36%, rgba(255, 255, 255, 0.2));
  --bg-blob-color-1: color-mix(in srgb, var(--theme-color) 38%, transparent);
  --bg-blob-color-2: color-mix(in srgb, var(--theme-color) 26%, transparent);
  --bg-blob-color-3: color-mix(in srgb, var(--theme-color) 18%, transparent);

  --type-normal: #a8a77a;
  --type-fighting: #c22e28;
  --type-flying: #a98ff3;
  --type-poison: #a33ea1;
  --type-ground: #e2bf65;
  --type-rock: #b6a136;
  --type-bug: #a6b91a;
  --type-ghost: #735797;
  --type-steel: #b7b7ce;
  --type-fire: #ee8130;
  --type-water: #6390f0;
  --type-grass: #7ac74c;
  --type-electric: #f7d02c;
  --type-psychic: #f95587;
  --type-ice: #96d9d6;
  --type-dragon: #6f35fc;
  --type-dark: #705746;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;

  --font-family-base: 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;

  --safe-bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
}