:root {
  /* Color Palette */
  --primary: #e51825; /* Red accent - USE THIS EXACT COLOR CONSISTENTLY */
  --primary-hover: #c41420; /* Darker red for hover states */
  --secondary: #222222; /* Dark gray for secondary elements */
  --black: #111111; /* Nearly black for text and backgrounds */
  --dark-gray: #333333; /* Dark gray for secondary elements */
  --gray: #666666; /* Medium gray for text */
  --light-gray: #f4f4f4; /* Light gray for backgrounds */
  --white: #ffffff; /* White for text on dark backgrounds */
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 5rem;
  
  /* Typography */
  --font-main: 'Archivo', sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-display: 3rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-heavy: 800;
  
  /* Effects */
  --transition: 300ms ease;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --border-radius: 4px;
  
  /* Header Dimensions - ADDED FOR CONSISTENCY */
  --header-height: 80px;
  --header-height-scrolled: 70px;
  
  /* Button Dimensions - ADDED FOR CONSISTENCY */
  --button-padding: 0.75rem 1.5rem;
  --button-min-width: 160px;
}

/* Media Queries Breakpoints (reference) */
/* These are for reference and not actual CSS variables */
/* --breakpoint-sm: 576px */
/* --breakpoint-md: 768px */
/* --breakpoint-lg: 992px */
/* Base Styles and Typography Variables */
:root {
    /* Colors */
    --primary: #e51825; /* Red accent - IMPORTANT: Keep this exact color for consistency */
    --primary-hover: #c41420; /* Darker red for hover states */
    --black: #000000;
    --dark: #0f0f0f;
    --gray: #333333;
    --light-gray: #f5f5f5;
    --white: #ffffff;
    
    /* Dimensions */
    --radius: 0;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    
    /* Header & Navigation Dimensions */
    --header-height: 80px;
    --header-height-scrolled: 70px;
    --header-padding: 0 1.5rem;
    
    /* Button Dimensions */
    --button-padding: 0.75rem 1.5rem;
    --button-min-width: 160px;
    --button-padding-mobile: 0.6rem 1.2rem;
    --button-min-width-mobile: 140px;
}