/* === SUNSET THEME === */
/* Import base styles */
@import url('base.css');

:root {
    /* Primary Colors - Sunset Orange */
    --primary-color: #f97316;
    --primary-hover: #ea580c;
    --primary-light: rgba(249, 115, 22, 0.1);
    --primary-shadow: rgba(249, 115, 22, 0.39);
    --primary-shadow-light: rgba(249, 115, 22, 0.2);
    --primary-border: #c2410c;

    /* Background Colors - Warm sunset gradients */
    --bg-primary: #431407;
    --bg-secondary: #7c2d12;
    --bg-tertiary: #9a3412;
    --bg-card: #431407;
    --bg-input: #431407;

    /* Text Colors */
    --text-primary: #fffbeb;
    --text-secondary: #fef3c7;
    --text-muted: #fcd34d;
    --text-dim: #fbbf24;

    /* Border Colors */
    --border-color: #7c2d12;
    --border-light: #9a3412;
    --border-hover: #c2410c;

    /* Hover States */
    --hover-bg: #7c2d12;
    --hover-text: #fffbeb;

    /* Secondary Elements */
    --secondary-bg: #9a3412;
    --secondary-hover: #7c2d12;
    --secondary-color: #fef3c7;

    /* Contrast Elements */
    --contrast-bg: #fbbf24;
    --contrast-hover: #fcd34d;
    --contrast-color: #431407;

    /* Semantic Colors */
    --success-color: #34d399;
    --success-bg: rgba(52, 211, 153, 0.2);
    --success-border: #10b981;

    --warning-color: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.2);
    --warning-border: #f59e0b;

    --error-color: #f87171;
    --error-hover: #fca5a5;
    --error-bg: rgba(248, 113, 113, 0.2);
    --error-border: #ef4444;

    --info-color: #38bdf8;
    --info-bg: rgba(56, 189, 248, 0.2);
    --info-border: #0ea5e9;

    /* Scrollbar */
    --scrollbar-track: #431407;
    --scrollbar-thumb: #7c2d12;
    --scrollbar-thumb-hover: #9a3412;

    /* Gradients - Sunset themed */
    --gradient-primary: radial-gradient(at 20% 20%, rgba(249, 115, 22, 0.2) 0px, transparent 50%);
    --gradient-secondary: radial-gradient(at 80% 80%, rgba(220, 38, 127, 0.2) 0px, transparent 50%);
}

/* Sunset theme specific styles */
body {
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    background-image: var(--gradient-primary), var(--gradient-secondary);
}

header {
    background: rgba(67, 20, 7, 0.9);
    border-bottom-color: var(--border-color);
}

header nav ul:first-child a {
    color: var(--primary-color);
}

header nav ul:last-child a {
    color: var(--text-muted);
}

header nav ul:last-child a:hover {
    color: var(--text-primary);
    background-color: var(--hover-bg);
}

/* Input styling for sunset theme */
input, select, textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-shadow-light);
    background-color: var(--bg-input);
}

input:hover, select:hover, textarea:hover {
    border-color: var(--border-hover);
    background-color: var(--hover-bg);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

/* Custom select specific styling for sunset theme */
.select-selected {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.select-selected:hover {
    border-color: var(--border-hover);
    background-color: var(--hover-bg);
}

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

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

.select-items div:hover, .same-as-selected {
    background-color: var(--primary-color);
    color: white;
}