/* =============================================
   MAIN CSS - Global Styles with AHDA Enhanced Colors
   ============================================= */

/* CSS Variables - AHDA Brand Colors */
:root {
    /* AHDA Brand Colors - Primary Palette */
    --ahda-orange: #F57B2C;
    --ahda-maroon: #AC1A2C;
    --ahda-green: #14776D;
    --ahda-teal: #0B4F66;
    --ahda-peal: #F3FAFA;
    
    /* Legacy Support (keep for backward compatibility) */
    --ahda-primary: var(--ahda-maroon);
    --ahda-primary-dark: #8B1522;
    --ahda-primary-light: #c73e4e;
    --ahda-secondary: var(--ahda-teal);
    
    /* Neutral Colors */
    --ahda-white: #FFFFFF;
    --ahda-bg: #F3FAFA;
    --ahda-text-gray: #465256;
    --ahda-ink: #162C32;
    
    /* Accessibility Optimized Colors */
    --primary-text: var(--ahda-ink);
    --secondary-text: var(--ahda-text-gray);
    --primary-heading: var(--ahda-teal);
    --accent-heading: var(--ahda-green);
    --primary-accent: var(--ahda-orange);
    --secondary-accent: var(--ahda-maroon);
    
    /* Utility Colors (kept from original) */
    --ahda-success: #28a745;
    --ahda-warning: #ffc107;
    --ahda-danger: var(--ahda-maroon);
    --ahda-info: #17a2b8;
    
    --text-dark: var(--ahda-ink);
    --text-muted: var(--ahda-text-gray);
    --text-light: var(--ahda-white);
    
    --bg-light: var(--ahda-peal);
    --bg-white: var(--ahda-white);
    --bg-gray: #f8f9fa;
    
    /* Enhanced Shadows with Teal Undertones */
    --shadow-sm: 0 2px 8px rgba(11, 79, 102, 0.08);
    --shadow-md: 0 8px 25px rgba(11, 79, 102, 0.12);
    --shadow-lg: 0 15px 40px rgba(11, 79, 102, 0.15);
    --shadow-orange: 0 8px 25px rgba(245, 123, 44, 0.2);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--primary-text);
    background-color: var(--ahda-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, .h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-heading); }
h2, .h2 { font-size: 2rem; font-weight: 700; margin-bottom: 0.875rem; color: var(--primary-heading); }
h3, .h3 { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.75rem; }
h4, .h4 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; }
h5, .h5 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
h6, .h6 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Links - Using Orange as primary accent */
a {
    color: var(--primary-accent);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--secondary-accent);
}

/* Buttons - Modern AHDA styling */
.btn-ahda {
    background: linear-gradient(135deg, var(--ahda-orange), var(--ahda-maroon));
    border: none;
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-ahda:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
    color: white;
}

.btn-outline-ahda {
    border: 2px solid var(--ahda-orange);
    background: transparent;
    color: var(--ahda-orange);
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-outline-ahda:hover {
    background: var(--ahda-orange);
    color: white;
    transform: translateY(-2px);
}

.btn-teal {
    background: var(--ahda-teal);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-teal:hover {
    background: var(--ahda-green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Cards */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    background: var(--ahda-white);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid #dee2e6;
    padding: 0.6rem 1rem;
    transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ahda-orange);
    box-shadow: 0 0 0 0.2rem rgba(245, 123, 44, 0.25);
}

/* Alerts - Updated with new palette */
.alert {
    border-radius: var(--radius-md);
    border: none;
}
.alert-success { background: #d4edda; color: #155724; }
.alert-danger { background: #f8d7da; color: var(--ahda-maroon); }
.alert-warning { background: #fff3cd; color: #856404; }
.alert-info { background: #d1ecf1; color: var(--ahda-teal); }

/* Utilities - Enhanced with new colors */
.bg-ahda-primary { background: var(--ahda-maroon); }
.bg-ahda-orange { background: var(--ahda-orange); }
.bg-ahda-teal { background: var(--ahda-teal); }
.bg-ahda-green { background: var(--ahda-green); }
.text-ahda-primary { color: var(--ahda-maroon); }
.text-ahda-orange { color: var(--ahda-orange); }
.text-ahda-teal { color: var(--ahda-teal); }
.text-ahda-green { color: var(--ahda-green); }
.cursor-pointer { cursor: pointer; }
.rounded-custom { border-radius: var(--radius-md); }

/* Container */
.container-custom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    .container-custom { padding: 0 1rem; }
}