/* ============================================
   ZING BRAND COLOR SYSTEM
   Professional Dark Navy + Vibrant Pink
   ============================================ */

:root {
    /* Primary Colors */
    --brand-navy-900: #0f172a;
    --brand-navy-800: #1e293b;
    --brand-navy-700: #1e3c72;
    --brand-navy-600: #2a5298;
    
    /* Secondary - Action/CTA */
    --brand-orange-primary: #ff1493;
    --brand-orange-light: #ff4db2;
    
    /* Semantic Colors */
    --brand-success: #4caf50;
    --brand-error: #f44336;
    --brand-warning: #ff4db2;
    --brand-info: #2196f3;
    
    /* Surfaces */
    --brand-surface-primary: #ffffff;
    --brand-surface-muted: #f8fafc;
    --brand-surface-light: #f1f5f9;
    --brand-surface-secondary: #f4f8ff;
    
    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    /* Borders & Shadows */
    --border-color: rgba(15, 23, 42, 0.08);
    --border-color-light: rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
}

/* ============================================
   UTILITY CLASSES FOR COLORS
   ============================================ */

.bg-navy-900 { background-color: var(--brand-navy-900); }
.bg-navy-800 { background-color: var(--brand-navy-800); }
.bg-navy-700 { background-color: var(--brand-navy-700); }
.bg-orange-primary { background-color: var(--brand-orange-primary); }
.bg-surface { background-color: var(--brand-surface-primary); }

.text-navy-900 { color: var(--brand-navy-900); }
.text-navy-700 { color: var(--brand-navy-700); }
.text-orange-primary { color: var(--brand-orange-primary); }
.text-white { color: white; }

.border-brand { border-color: var(--border-color); }
.shadow-brand { box-shadow: var(--shadow-md); }

/* ============================================
   LEGACY COLOR FALLBACK
   ============================================ */

/* Map old #1e3c72 references to new system */
.legacy-blue-700 { color: var(--brand-navy-700); }
.legacy-bg-blue-700 { background-color: var(--brand-navy-700); }

/* Override MUD colors with brand palette */
.mud-button.mud-button-filled.mud-button-color-warning {
    background: linear-gradient(135deg, #ff1493 0%, #ff4db2 100%) !important;
    color: white !important;
    box-shadow: 0 8px 22px rgba(255, 20, 147, 0.3) !important;
}

.mud-button.mud-button-filled.mud-button-color-warning:hover {
    background: linear-gradient(135deg, #ff4db2 0%, #ff77c8 100%) !important;
}

.mud-chip.mud-chip-color-warning {
    background-color: rgba(255, 20, 147, 0.15) !important;
    color: var(--brand-orange-primary) !important;
    border-color: rgba(255, 20, 147, 0.3) !important;
}

.mud-text-field.mud-input-underline .mud-input {
    border-bottom-color: var(--border-color) !important;
}

.mud-text-field.mud-input-underline .mud-input:focus {
    border-bottom-color: var(--brand-orange-primary) !important;
}

@media (max-width: 960px) {
    :root {
        /* Adjust for mobile readability */
    }
}