/* UIKit FSE Theme - Color Schemes and Gradients */

/* ============================================================================
   Color Scheme CSS Variables
   ============================================================================ */

:root {
    /* Default scheme colors */
    --uikit-primary: #1e87f0;
    --uikit-secondary: #666666;
    --uikit-accent: #f39c12;
    --uikit-success: #27ae60;
    --uikit-danger: #e74c3c;
    --uikit-warning: #f39c12;
}

/* ============================================================================
   Gradient Backgrounds
   ============================================================================ */

.gradient-primary-secondary {
    background: linear-gradient(135deg, #1e87f0 0%, #666666 100%);
}

.gradient-blue {
    background: linear-gradient(135deg, #1e87f0 0%, #0a3d82 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.gradient-sunset {
    background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
}

.gradient-ocean {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.gradient-forest {
    background: linear-gradient(135deg, #27ae60 0%, #16a085 100%);
}

.gradient-rose {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.gradient-mint {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.gradient-lavender {
    background: linear-gradient(135deg, #dda0dd 0%, #9b59b6 100%);
}

.gradient-peach {
    background: linear-gradient(135deg, #ffa07a 0%, #ff7f50 100%);
}

.gradient-dark-light {
    background: linear-gradient(135deg, #2c3e50 0%, #ecf0f1 100%);
}

.gradient-vibrant-mix {
    background: linear-gradient(135deg, #f39c12 0%, #e74c3c 50%, #9b59b6 100%);
}

/* ============================================================================
   Modern Dark Scheme
   ============================================================================ */

.color-scheme-modern-dark {
    --uikit-primary: #00d4ff;
    --uikit-secondary: #1a1a1a;
    --uikit-accent: #ff00ff;
    --uikit-success: #00ff88;
    --uikit-danger: #ff0055;
    --uikit-warning: #ffaa00;
    background-color: #0a0e27;
    color: #e0e0e0;
}

/* ============================================================================
   Minimalist Scheme
   ============================================================================ */

.color-scheme-minimalist {
    --uikit-primary: #000000;
    --uikit-secondary: #808080;
    --uikit-accent: #ffffff;
    --uikit-success: #333333;
    --uikit-danger: #666666;
    --uikit-warning: #999999;
    background-color: #ffffff;
    color: #000000;
}

/* ============================================================================
   Vibrant Scheme
   ============================================================================ */

.color-scheme-vibrant {
    --uikit-primary: #ff006e;
    --uikit-secondary: #fb5607;
    --uikit-accent: #ffbe0b;
    --uikit-success: #8338ec;
    --uikit-danger: #fb5607;
    --uikit-warning: #ffbe0b;
    background-color: #ffffff;
    color: #1a1a1a;
}

/* ============================================================================
   Pastel Scheme
   ============================================================================ */

.color-scheme-pastel {
    --uikit-primary: #ffa0d2;
    --uikit-secondary: #a0c4ff;
    --uikit-accent: #caffbf;
    --uikit-success: #caffbf;
    --uikit-danger: #ffadad;
    --uikit-warning: #ffd6a5;
    background-color: #fef9f7;
    color: #333333;
}

/* ============================================================================
   Ocean Scheme
   ============================================================================ */

.color-scheme-ocean {
    --uikit-primary: #0077be;
    --uikit-secondary: #00b4d8;
    --uikit-accent: #90e0ef;
    --uikit-success: #00b4d8;
    --uikit-danger: #0077be;
    --uikit-warning: #90e0ef;
    background-color: #e0f4ff;
    color: #003a5c;
}

/* ============================================================================
   Sunset Scheme
   ============================================================================ */

.color-scheme-sunset {
    --uikit-primary: #ff6b6b;
    --uikit-secondary: #ffa500;
    --uikit-accent: #ffe66d;
    --uikit-success: #ffa500;
    --uikit-danger: #ff6b6b;
    --uikit-warning: #ffe66d;
    background-color: #fff5e6;
    color: #331a00;
}

/* ============================================================================
   Forest Scheme
   ============================================================================ */

.color-scheme-forest {
    --uikit-primary: #2d6a4f;
    --uikit-secondary: #52b788;
    --uikit-accent: #74c69d;
    --uikit-success: #52b788;
    --uikit-danger: #2d6a4f;
    --uikit-warning: #74c69d;
    background-color: #e8f5e9;
    color: #1b3a22;
}

/* ============================================================================
   Duotone Filters
   ============================================================================ */

/* Using CSS filters to create duotone effects */
.duotone-bw {
    filter: grayscale(100%);
}

.duotone-blue-white {
    filter: saturate(1.2) hue-rotate(200deg);
}

.duotone-blue-duotone {
    filter: saturate(1.5) hue-rotate(210deg) brightness(1.1);
}

.duotone-purple-gold {
    filter: saturate(1.3) hue-rotate(250deg);
}

.duotone-red-white {
    filter: saturate(1.2) hue-rotate(0deg);
}

.duotone-green-light {
    filter: saturate(1.1) hue-rotate(120deg) brightness(1.05);
}

.duotone-dark-light {
    filter: brightness(0.9) contrast(1.2);
}

.duotone-teal-gold {
    filter: saturate(1.4) hue-rotate(160deg);
}

.duotone-pink-yellow {
    filter: saturate(1.5) hue-rotate(280deg);
}

.duotone-ocean-blue {
    filter: saturate(1.3) hue-rotate(190deg) brightness(1.05);
}

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

/* Primary color utilities */
.text-primary {
    color: var(--uikit-primary) !important;
}

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

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

/* Secondary color utilities */
.text-secondary {
    color: var(--uikit-secondary) !important;
}

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

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

/* Accent color utilities */
.text-accent {
    color: var(--uikit-accent) !important;
}

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

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

/* Success color utilities */
.text-success {
    color: var(--uikit-success) !important;
}

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

/* Danger color utilities */
.text-danger {
    color: var(--uikit-danger) !important;
}

.bg-danger {
    background-color: var(--uikit-danger) !important;
}

/* Warning color utilities */
.text-warning {
    color: var(--uikit-warning) !important;
}

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

/* ============================================================================
   Responsive Gradient Adjustments
   ============================================================================ */

@media (max-width: 768px) {
    /* Adjust gradient angle for mobile */
    .gradient-primary-secondary,
    .gradient-blue,
    .gradient-purple,
    .gradient-sunset,
    .gradient-ocean,
    .gradient-forest,
    .gradient-rose,
    .gradient-mint,
    .gradient-lavender,
    .gradient-peach,
    .gradient-dark-light {
        background-attachment: fixed;
    }
}