/* Brand Colors for nuVision - based on BRAND_GUIDE.md */

:root {
    /* Primary Colors */
    --primary-teal: #3cdbc0;
    --primary-teal-dark: #29a08b;
    
    /* Secondary/Neutral Colors */
    --secondary: #6c757d;
    --secondary-dark: #5c636a;
    
    /* Success Color */
    --success: #198754;
    
    /* Background Colors */
    --light-bg: #f8f9fa;
    --light-card-bg: #ffffff;
    
    /* Text Colors */
    --light-text: #e8e8e8;
    --dark-text: #000000;
    
    /* Common UI Colors */
    --border-color: #dee2e6;
    --shadow-color: rgba(60, 219, 192, 0.2);
    
    /* Gradient */
    --primary-gradient: linear-gradient(to right, #3cdbc0 0%, #29a08b 100%);
    --modal-header-gradient: linear-gradient(135deg, #3cdbc0 0%, #29a08b 100%);
}

/* Primary Button Styles */
.btn-primary {
    background-color: var(--primary-teal) !important;
    border-color: var(--primary-teal) !important;
    color: white !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 4px 10px var(--shadow-color) !important;
}

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

/* Secondary Button Styles */
.btn-secondary {
    background-color: var(--secondary) !important;
    color: white !important;
    border-color: var(--secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

/* Quote Button ("Get a Quote") */
.btn-quote {
    background: var(--primary-gradient) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    font-family: 'League Spartan', sans-serif !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
    transition: background-position 0.3s ease !important;
    background-size: 200% auto !important;
}

.btn-quote:hover {
    background-position: right center !important;
}

/* Modal Headers */
.modal-header {
    background: var(--modal-header-gradient) !important;
    color: white !important;
}

/* Selected Elements */
.selected {
    border-color: var(--primary-teal) !important;
    box-shadow: 0 0 10px var(--primary-teal) !important;
}

/* Style Selection Card */
.door-style-item.selected {
    border: 2px solid var(--primary-teal) !important;
    box-shadow: 0 0 10px var(--shadow-color) !important;
}

/* Color Selection Item */
.color-item.selected {
    border: 2px solid var(--primary-teal) !important;
    box-shadow: 0 0 10px var(--shadow-color) !important;
}

/* Step Indicator */
.step-indicator .step-item.active {
    background-color: var(--primary-teal) !important;
    color: var(--dark-text) !important;
}

/* Badges */
.badge {
    background-color: var(--primary-teal) !important;
    color: var(--dark-text) !important;
}

/* Tip Box */
.tip-box {
    border-left: 4px solid var(--primary-teal) !important;
}

/* Focus state for inputs */
input:focus, 
select:focus, 
textarea:focus {
    border-color: var(--primary-teal) !important;
    box-shadow: 0 0 0 0.25rem var(--shadow-color) !important;
}