@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Hero section */
    --hero-gradient: none; /* This will be set via JavaScript */
    
    /* Main colors - Default theme (Red) */
    --primary-color: #0D5EAF; /* Red color used throughout the site */
    --primary-color-hover: #1071D0; /* Darker red for hover states */
    --secondary-color: #4A5568; /* Gray color for secondary elements */
    
    /* Text colors */
    --text-dark: #1A202C; /* Dark text color */
    --text-medium: #4A5568; /* Medium gray text */
    --text-light: #A0AEC0; /* Light gray text */
    --text-white: #FFFFFF; /* White text */
    
    /* Background colors */
    --bg-white: #FFFFFF; /* White background */
    --bg-light: #F7FAFC; /* Light gray background */
    --bg-medium: #E2E8F0; /* Medium gray background */
    --bg-dark: #2D3748; /* Dark background */
    --bg-darker: #1A202C; /* Darker background (footer) */
    
    /* UI element colors */
    --success-color: #48BB78; /* Green for success messages */
    --warning-color: #ED8936; /* Orange for warnings */
    --error-color: #F56565; /* Red for errors */
    --info-color: #4299E1; /* Blue for information */
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-white);
}

.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
}

.menu-item:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.section-heading::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 15px auto 0;
}

/* Override Tailwind classes with our CSS variables */
.bg-red-600 { background-color: var(--primary-color) !important; }
.hover\:bg-red-700:hover { background-color: var(--primary-color-hover) !important; }
.text-red-600 { color: var(--primary-color) !important; }
.text-red-500 { color: var(--primary-color) !important; }

.bg-gray-100 { background-color: var(--bg-light) !important; }
.bg-gray-50 { background-color: var(--bg-light) !important; }
.bg-gray-200 { background-color: var(--bg-medium) !important; }
.bg-gray-800 { background-color: var(--bg-dark) !important; }
.bg-gray-700 { background-color: var(--bg-darker) !important; }

.text-gray-700 { color: var(--text-medium) !important; }
.text-gray-600 { color: var(--text-medium) !important; }
.text-gray-800 { color: var(--text-dark) !important; }
.text-gray-400 { color: var(--text-light) !important; }
.text-gray-500 { color: var(--text-light) !important; }

.border-gray-700 { border-color: var(--bg-darker) !important; }