:root {
  /* Brand Colors */
  --color-red: #e60514;
  --color-blue: #0078E6;
  --color-dark: #22292f;
  --color-dark-deep: #0a0c0e;
  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #b0b0b0;
  --color-gray-500: #6b6b6b;
  --color-gray-700: #3a3a3a;
  --color-gray-900: #1a1a1a;

  /* Semantic Colors */
  --color-bg-primary: var(--color-dark-deep);
  --color-bg-secondary: var(--color-dark);
  --color-text-primary: var(--color-white);
  --color-text-muted: var(--color-gray-300);
  --color-accent: var(--color-red);
  --color-accent-alt: var(--color-blue);
  --color-success: #22c55e;

  /* Typography */
  --font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Type Scale (perfect fourth - 1.333) */
  --size-xs: 0.75rem;
  --size-sm: 1rem;
  --size-base: 1.333rem;
  --size-lg: 1.777rem;
  --size-xl: 2.369rem;
  --size-2xl: 3.157rem;
  --size-3xl: 4.209rem;
  --size-4xl: 5.61rem;
  --size-hero: 7.478rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Animation Speeds */
  --speed-fast: 0.3s;
  --speed-normal: 0.6s;
  --speed-slow: 1.2s;
  --speed-dramatic: 2.0s;

  /* Z-Index */
  --z-background: 0;
  --z-content: 10;
  --z-overlay: 100;
  --z-controls: 200;
  --z-preloader: 1000;
}