/* ============================================
   Brand Theme - Orange Color Palette
   ============================================ */

:root {
    /* Brand Colors */
    --primary-orange: #ff6b35;
    --primary-orange-dark: #e85a28;
    --primary-orange-darker: #cc4d1f;
    --primary-orange-light: #ff8557;
    --primary-orange-lighter: #ffa680;
    --primary-orange-pale: #ffe8df;

    /* Secondary Colors */
    --secondary-blue: #004e89;
    --secondary-blue-light: #1a659e;
    --secondary-teal: #00a8cc;
    --accent-yellow: #ffa600;

    /* Bootstrap Variable Overrides */
    --bs-primary: #ff6b35;
    --bs-primary-rgb: 255, 107, 53;
    --bs-secondary: #004e89;
    --bs-secondary-rgb: 0, 78, 137;
    --bs-success: #10b981;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    --bs-info: #3b82f6;

    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.75rem;

    --bs-link-color: #ff6b35;
    --bs-link-hover-color: #e85a28;

    /* Custom shadow for orange brand */
    --shadow-orange: 0 4px 14px 0 rgba(255, 107, 53, 0.39);
}

/* ============================================
   Bootstrap Component Overrides
   ============================================ */

/* Primary button with orange brand glow */
.btn-primary {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-orange-dark);
    border-color: var(--primary-orange-dark);
    box-shadow: var(--shadow-orange);
    transform: translateY(-1px);
    transition: all 0.2s ease-in-out;
}

.btn-primary:active {
    background-color: var(--primary-orange-darker);
    border-color: var(--primary-orange-darker);
}

/* Enhanced card hover effect */
.card {
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ============================================
   Custom Utility Classes
   ============================================ */

.text-orange {
    color: var(--primary-orange) !important;
}

.bg-orange {
    background-color: var(--primary-orange) !important;
}

.border-orange {
    border-color: var(--primary-orange) !important;
}

.btn-orange {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
}

.btn-orange:hover {
    background-color: var(--primary-orange-dark);
    border-color: var(--primary-orange-dark);
}