: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.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: clamp(1.55rem, 3.4vw, 2.15rem);

  /* Shared heading sizes (sitewide) */
  --text-page-hero: clamp(1.95rem, 4.4vw, 3rem);
  --text-section-lg: clamp(1.55rem, 2.6vw, 2.1rem);
  --text-section-md: clamp(1.45rem, 2.5vw, 2rem);
  --text-cta-lg: clamp(1.65rem, 3vw, 2.25rem);

  --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;
  }
}