:root {
  --color-bg: #0B0B0D;
  --color-bg-elevated: #141416;
  --color-bg-elevated-2: #1C1C1F;
  --color-border: #2A2A2E;

  --color-primary: #D11935;
  --color-primary-dark: #8C0F22;
  --color-primary-glow: rgba(209, 25, 53, 0.35);
  --color-primary-rgb: 209, 25, 53;

  --color-metal: #B9BEC7;
  --color-metal-dark: #7A7E86;
  --color-metal-rgb: 185, 190, 199;

  --color-text: #F2F2F3;
  --color-text-muted: #A7A7AC;
  --color-white: #FFFFFF;

  --color-success: #2FAE60;
  --color-danger: #E23B3B;
  --color-warning: #E2A93B;

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(11, 11, 13, 0.2) 0%, rgba(11, 11, 13, 0.75) 60%, #0B0B0D 100%);
  --gradient-overlay-radial: radial-gradient(120% 120% at 50% 0%, rgba(209, 25, 53, 0.18) 0%, rgba(11, 11, 13, 0) 55%);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.5rem;

  --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;
  --space-11: 80px;
  --space-12: 96px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(var(--color-primary-rgb), 0.25), 0 8px 32px var(--color-primary-glow);
  --shadow-glow-lg: 0 0 0 1px rgba(var(--color-primary-rgb), 0.3), 0 16px 56px var(--color-primary-glow);
  --shadow-metal-glow: 0 0 24px rgba(var(--color-metal-rgb), 0.18);

  --container-max: 1280px;
  --container-padding: var(--space-5);

  --header-height: 76px;
  --mini-player-height: 76px;

  --z-header: 100;
  --z-mobile-menu: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
  --z-mini-player: 350;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}