/* css/index.css */
:root {
    /* Brand Color Palette */
    --bs-primary: #1B4D8E;
    --bs-primary-rgb: 27, 77, 142;
    --bs-secondary: #F5A623;
    --bs-secondary-rgb: 245, 166, 35;
    --bs-success: #2ECC71;
    --bs-success-rgb: 46, 204, 113;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    
    /* Extended Color Tokens */
    --primary: #1B4D8E;
    --primary-dark: #123565;
    --primary-light: #2563eb;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    
    --secondary: #F5A623;
    --secondary-dark: #d48806;
    --secondary-light: #fbbf24;
    
    --accent: #2ECC71;
    --accent-dark: #27ae60;
    --accent-light: #a8f0c6;

    --text: #2d3748;
    --text-light: #64748b;
    --text-muted: #94a3b8;
    --bg: #f8fafc;
    --bg-alt: #f1f5f9;
    --border: #e2e8f0;

    /* Custom Tokens */
    --bg-primary-subtle: rgba(27, 77, 142, 0.08);
    --bg-secondary-subtle: rgba(245, 166, 35, 0.1);
    --bg-success-subtle: rgba(46, 204, 113, 0.1);
    --bg-dark-subtle: rgba(33, 37, 41, 0.06);
    --bg-darker: #12161b;

    /* Spacing & Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 9999px;

    /* Box Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(27, 77, 142, 0.08);
    --shadow-xl: 0 20px 48px rgba(0,0,0,0.12);

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    
    /* Animation */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

body {
    font-family: var(--font-primary);
    color: var(--text);
    background-color: #ffffff;
    line-height: 1.65;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .font-montserrat, .section-title {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* Bootstrap Overrides */
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.text-secondary { color: var(--bs-secondary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}
.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: #fff;
}

.text-success { color: var(--bs-success) !important; }

/* Custom Background Utilities */
.bg-primary-subtle { background-color: var(--bg-primary-subtle) !important; }
.bg-secondary-subtle { background-color: var(--bg-secondary-subtle) !important; }
.bg-success-subtle { background-color: var(--bg-success-subtle) !important; }
.bg-dark-subtle { background-color: var(--bg-dark-subtle) !important; }
.bg-darker { background-color: var(--bg-darker) !important; }
.bg-light-subtle { background-color: var(--bg) !important; }

/* Utility Classes */
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.transition-transform { transition: transform var(--transition-normal); }
.duration-500 { transition-duration: 0.5s; }