:root {
  --color-black: #0a0a0a;
  --color-dark: #111111;
  --color-dark-2: #1a1a1a;
  --color-dark-3: #222222;
  --color-red: #e31e24;
  --color-red-dark: #c41a1f;
  --color-red-glow: rgba(227, 30, 36, 0.4);
  --color-yellow: #ffc107;
  --color-yellow-dark: #e6ad00;
  --color-white: #ffffff;
  --color-gray: #b0b0b0;
  --color-gray-light: #d4d4d4;
  --color-gray-dark: #666666;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.15rem;
  --text-xl: clamp(2rem, 4.2vw, 2.75rem);

  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
  --shadow-red: 0 4px 20px rgba(227, 30, 36, 0.35);
  --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.5);

  --page-padding: 48px;
  --section-padding: 80px 0;
}

@media (max-width: 1024px) {
  :root {
    --page-padding: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-padding: 20px;
  }
}