/* =================================================================
   Color Utility Classes
   Based on image2model brand guidelines
   ================================================================= */

/* =================================================================
   Background Color Utilities
   ================================================================= */

/* Brand Primary Colors */
.bg-dark-charcoal { background-color: var(--brand-dark-charcoal); }

.bg-vibrant-red { background-color: var(--brand-vibrant-red); }

.bg-sky-blue { background-color: var(--brand-sky-blue); }

.bg-bright-cyan { background-color: var(--brand-bright-cyan); }

/* .bg-sunset-orange - REMOVED: Orange too harsh for backgrounds */

/* .bg-golden-yellow - REMOVED: Yellow too harsh for backgrounds */

/* Semantic Colors */
.bg-primary { background-color: var(--color-primary); }

.bg-secondary { background-color: var(--color-secondary); }

.bg-accent { background-color: var(--color-accent); }

.bg-success { background-color: var(--color-success); }

.bg-warning { background-color: var(--color-warning); }

.bg-error { background-color: var(--color-error); }

.bg-info { background-color: var(--color-info); }

/* Neutral Colors */
.bg-white { background-color: var(--brand-white); }

.bg-black { background-color: var(--brand-black); }

.bg-gray-100 { background-color: var(--gray-100); }

.bg-gray-200 { background-color: var(--gray-200); }

.bg-gray-300 { background-color: var(--gray-300); }

.bg-gray-400 { background-color: var(--gray-400); }

.bg-gray-500 { background-color: var(--gray-500); }

.bg-gray-600 { background-color: var(--gray-600); }

.bg-gray-700 { background-color: var(--gray-700); }

.bg-gray-800 { background-color: var(--gray-800); }

.bg-gray-900 { background-color: var(--gray-900); }

/* =================================================================
   Text Color Utilities
   ================================================================= */

/* Brand Primary Colors */
.text-dark-charcoal { color: var(--brand-dark-charcoal); }

.text-vibrant-red { color: var(--brand-vibrant-red); }

.text-sky-blue { color: var(--brand-sky-blue); }

.text-bright-cyan { color: var(--brand-bright-cyan); }

.text-sunset-orange { color: var(--brand-sunset-orange); }

.text-golden-yellow { color: var(--brand-golden-yellow); }

/* Semantic Colors */
.text-primary { color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }

.text-accent { color: var(--color-accent); }

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

.text-warning { color: var(--color-warning); }

.text-error { color: var(--color-error); }

.text-info { color: var(--color-info); }

/* Neutral Colors */
.text-white { color: var(--brand-white); }

.text-black { color: var(--brand-black); }

.text-gray-100 { color: var(--gray-100); }

.text-gray-200 { color: var(--gray-200); }

.text-gray-300 { color: var(--gray-300); }

.text-gray-400 { color: var(--gray-400); }

.text-gray-500 { color: var(--gray-500); }

.text-gray-600 { color: var(--gray-600); }

.text-gray-700 { color: var(--gray-700); }

.text-gray-800 { color: var(--gray-800); }

.text-gray-900 { color: var(--gray-900); }

/* Context-aware text colors */
.text-body { color: var(--text-primary); }

.text-muted { color: var(--text-muted); }

.text-inverse { color: var(--text-inverse); }

/* =================================================================
   Border Color Utilities
   ================================================================= */
.border-primary { border-color: var(--color-primary); }

.border-secondary { border-color: var(--color-secondary); }

.border-accent { border-color: var(--color-accent); }

.border-success { border-color: var(--color-success); }

.border-warning { border-color: var(--color-warning); }

.border-error { border-color: var(--color-error); }

.border-info { border-color: var(--color-info); }

.border-gray-100 { border-color: var(--gray-100); }

.border-gray-200 { border-color: var(--gray-200); }

.border-gray-300 { border-color: var(--gray-300); }

.border-gray-400 { border-color: var(--gray-400); }

.border-gray-500 { border-color: var(--gray-500); }

.border-gray-600 { border-color: var(--gray-600); }

.border-gray-700 { border-color: var(--gray-700); }

.border-gray-800 { border-color: var(--gray-800); }

.border-gray-900 { border-color: var(--gray-900); }

/* =================================================================
   Gradient Utilities
   ================================================================= */
.bg-gradient-warm-sunset { background: var(--gradient-warm-sunset); }

.bg-gradient-cool-ocean { background: var(--gradient-cool-ocean); }

.bg-gradient-mountain-mist { background: var(--gradient-mountain-mist); }

.bg-gradient-tech-fusion { background: var(--gradient-tech-fusion); }

.bg-gradient-creative-burst { background: var(--gradient-creative-burst); }

/* Text Gradients */
.text-gradient-primary {
    background: var(--gradient-text-primary);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-secondary {
    background: var(--gradient-text-secondary);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =================================================================
   Hover Utilities (for interactive elements)
   ================================================================= */
.hover\:bg-primary:hover { background-color: var(--color-primary); }

.hover\:bg-secondary:hover { background-color: var(--color-secondary); }

.hover\:bg-accent:hover { background-color: var(--color-accent); }

.hover\:text-primary:hover { color: var(--color-primary); }

.hover\:text-secondary:hover { color: var(--color-secondary); }

.hover\:text-accent:hover { color: var(--color-accent); }

.hover\:border-primary:hover { border-color: var(--color-primary); }

.hover\:border-secondary:hover { border-color: var(--color-secondary); }

.hover\:border-accent:hover { border-color: var(--color-accent); }

/* =================================================================
   Opacity Utilities for Colors
   ================================================================= */
.bg-opacity-10 { background-color: rgb(var(--current-bg-rgb), 0.1); }

.bg-opacity-20 { background-color: rgb(var(--current-bg-rgb), 0.2); }

.bg-opacity-30 { background-color: rgb(var(--current-bg-rgb), 0.3); }

.bg-opacity-40 { background-color: rgb(var(--current-bg-rgb), 0.4); }

.bg-opacity-50 { background-color: rgb(var(--current-bg-rgb), 0.5); }

.bg-opacity-60 { background-color: rgb(var(--current-bg-rgb), 0.6); }

.bg-opacity-70 { background-color: rgb(var(--current-bg-rgb), 0.7); }

.bg-opacity-80 { background-color: rgb(var(--current-bg-rgb), 0.8); }

.bg-opacity-90 { background-color: rgb(var(--current-bg-rgb), 0.9); }

/* =================================================================
   Shadow Utilities with Brand Colors
   ================================================================= */
.shadow-sm { box-shadow: var(--shadow-sm); }

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

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

.shadow-red { box-shadow: var(--shadow-red); }

.shadow-blue { box-shadow: var(--shadow-blue); }

.shadow-yellow { box-shadow: var(--shadow-yellow); }

/* =================================================================
   Status/Alert Color Utilities
   ================================================================= */
.alert-success {
    background-color: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    color: var(--status-success-text);
}

.alert-warning {
    background-color: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    color: var(--status-warning-text);
}

.alert-error {
    background-color: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error-text);
}

.alert-info {
    background-color: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    color: var(--status-info-text);
}

/* =================================================================
   Focus Utilities with Brand Colors
   ================================================================= */
.focus\:ring-primary:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.focus\:ring-secondary:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.focus\:ring-accent:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* =================================================================
   Dark Mode Specific Utilities
   ================================================================= */
@media (prefers-color-scheme: dark) {
    .dark\:bg-primary { background-color: var(--dark-bg-primary); }

    .dark\:bg-secondary { background-color: var(--dark-bg-secondary); }

    .dark\:bg-tertiary { background-color: var(--dark-bg-tertiary); }
    
    .dark\:text-primary { color: var(--dark-text-primary); }

    .dark\:text-secondary { color: var(--dark-text-secondary); }

    .dark\:text-muted { color: var(--dark-text-muted); }
    
    .dark\:border-primary { border-color: var(--dark-border-color); }
}