/* KOJIE AI - SUNSET HORIZON THEME */
/* Warm oranges, pinks, and purples like a perfect sunset */

:root {
    /* Sunset Color Palette */
    --sunset-primary: #ff6b35;
    --sunset-primary-rgb: 255, 107, 53;
    --sunset-secondary: #ff8c42;
    --sunset-secondary-rgb: 255, 140, 66;
    --sunset-accent: #ffb74d;
    --sunset-accent-rgb: 255, 183, 77;
    --sunset-pink: #ff5e8a;
    --sunset-purple: #9d4edd;
    
    /* Sunset Background Gradients */
    --sunset-bg-primary: rgba(25, 10, 5, 0.98);
    --sunset-bg-secondary: rgba(40, 20, 15, 0.95);
    --sunset-bg-tertiary: rgba(60, 35, 25, 0.9);
    
    --sunset-bg-gradient: linear-gradient(135deg, 
        rgba(40, 15, 25, 0.98) 0%,
        rgba(60, 25, 30, 0.96) 20%,
        rgba(80, 35, 20, 0.94) 40%,
        rgba(70, 30, 25, 0.95) 60%,
        rgba(50, 20, 20, 0.97) 80%,
        rgba(30, 10, 15, 0.98) 100%
    );
    
    /* Text Colors */
    --sunset-text-primary: #ffe0d6;
    --sunset-text-secondary: rgba(255, 183, 77, 0.9);
    --sunset-text-muted: rgba(255, 140, 66, 0.7);
}

/* Sunset Body Background */
body[data-theme="sunset"] {
    background: var(--sunset-bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Sunset Glow Effect */
body[data-theme="sunset"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: radial-gradient(
        ellipse at top,
        rgba(255, 107, 53, 0.15) 0%,
        rgba(157, 78, 221, 0.08) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: -1;
}

/* Horizon Line Effect */
body[data-theme="sunset"]::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--sunset-purple),
        var(--sunset-pink),
        var(--sunset-primary),
        var(--sunset-accent)
    );
    pointer-events: none;
    z-index: 1000;
}

/* Sunset Cards */
body[data-theme="sunset"] .card,
body[data-theme="sunset"] .elegant-card {
    background: rgba(60, 30, 25, 0.6) !important;
    border: 1px solid rgba(255, 107, 53, 0.3) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="sunset"] .card:hover,
body[data-theme="sunset"] .elegant-card:hover {
    border-color: var(--sunset-primary) !important;
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.3) !important;
}

/* Sunset Buttons */
body[data-theme="sunset"] .btn-primary,
body[data-theme="sunset"] .btn-innovation-primary {
    background: linear-gradient(135deg, var(--sunset-primary), var(--sunset-pink)) !important;
    border: none !important;
    color: #fff !important;
}

body[data-theme="sunset"] .btn-primary:hover,
body[data-theme="sunset"] .btn-innovation-primary:hover {
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5) !important;
}

/* Sunset Text */
body[data-theme="sunset"] {
    color: var(--sunset-text-primary) !important;
}

body[data-theme="sunset"] h1,
body[data-theme="sunset"] h2,
body[data-theme="sunset"] h3 {
    background: linear-gradient(135deg, var(--sunset-primary), var(--sunset-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sunset Navbar */
body[data-theme="sunset"] .navbar {
    background: rgba(40, 20, 15, 0.95) !important;
    border-bottom: 2px solid var(--sunset-primary) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="sunset"] .navbar .nav-link {
    color: var(--sunset-text-primary) !important;
}

body[data-theme="sunset"] .navbar .nav-link:hover {
    color: var(--sunset-primary) !important;
}