/* Theme System - Shared variables and theme definitions */

/* ============================================
   DARK THEME (default — muted steel blue)
   ============================================ */
:root,
[data-theme="dark"] {
    --accent: #8fa8b8;
    --accent-hover: #a0b8c8;
    --accent-dim: rgba(143, 168, 184, 0.08);
    --accent-mid: rgba(143, 168, 184, 0.12);
    --accent-bright: rgba(143, 168, 184, 0.18);
    --accent-glow: rgba(143, 168, 184, 0.25);
    --accent-faint: rgba(143, 168, 184, 0.04);

    --bg-base: #0a0a0a;
    --bg-page: #111111;
    --bg-panel: #1a1a1a;
    --bg-elevated: #2a2a2a;
    --bg-hover: #222222;
    --bg-input: #0d0d0d;
    --bg-sidebar: #141414;
    --bg-surface: var(--bg-panel);
    --bg-header: linear-gradient(90deg, #2a2a2a 0%, #1a1a1a 100%);
    --shadow: 0 2px 8px rgba(0,0,0,0.5);
    --border-radius: 6px;

    --text-primary: #d0d8e0;
    --text-secondary: #8a95a0;
    --text-muted: #a0a8b0;
    --text-inverse: #000;

    --border: #333;
    --border-light: #444;
    --border-accent: var(--accent);

    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --danger: #f44336;

    --prio-dim: rgba(76, 175, 80, 0.2);
    --prio-text: #a5d6a7;
    --poor-dim: rgba(244, 67, 54, 0.2);
    --poor-text: #ef9a9a;

    --gradient-accent: linear-gradient(135deg, #3a4a52 0%, #1a1a1a 100%);
    --gradient-accent-hover: linear-gradient(135deg, #4a5a62 0%, #2a2a2a 100%);
    --gradient-surface: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    --gradient-sidebar: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
    --gradient-sidebar-accent: linear-gradient(90deg, rgba(143,168,184,0.05) 0%, rgba(143,168,184,0.02) 100%);
    --gradient-page: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #111 100%);
    --gradient-panel: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(42,42,42,0.9) 100%);
    --gradient-elevated: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    --error-dim: rgba(244,67,54,0.15);
    --error-glow: rgba(244,67,54,0.3);

    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   LIGHT THEME (softened off-white)
   ============================================ */
[data-theme="light"] {
    --accent: #18181b;
    --accent-hover: #000000;
    --accent-dim: rgba(24, 24, 27, 0.08);
    --accent-mid: rgba(24, 24, 27, 0.12);
    --accent-bright: rgba(24, 24, 27, 0.18);
    --accent-glow: rgba(24, 24, 27, 0.25);
    --accent-faint: rgba(24, 24, 27, 0.04);

    --bg-base: #f7f7f8;
    --bg-page: #f0f0f2;
    --bg-panel: #fafafa;
    --bg-elevated: #f5f5f7;
    --bg-hover: #e8e8eb;
    --bg-input: #fafafa;
    --bg-sidebar: #eaeaec;
    --bg-surface: var(--bg-panel);
    --bg-header: linear-gradient(90deg, #fafafa 0%, #f5f5f7 100%);

    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;
    --text-inverse: #fafafa;

    --border: #d4d4d8;
    --border-light: #e4e4e7;
    --border-accent: #18181b;

    --success: #16a34a;
    --error: #dc2626;
    --warning: #d97706;
    --danger: #dc2626;

    --prio-dim: #18181b;
    --prio-text: #ffffff;
    --poor-dim: #e4e4e7;
    --poor-text: #52525b;

    --gradient-accent: linear-gradient(135deg, #18181b 0%, #3f3f46 100%);
    --gradient-accent-hover: linear-gradient(135deg, #000000 0%, #27272a 100%);
    --gradient-surface: linear-gradient(135deg, #fafafa 0%, #f5f5f7 100%);
    --gradient-sidebar: linear-gradient(180deg, #eaeaec 0%, #e0e0e2 100%);
    --gradient-sidebar-accent: linear-gradient(90deg, rgba(24, 24, 27, 0.06) 0%, rgba(24, 24, 27, 0.02) 100%);
    --gradient-page: linear-gradient(135deg, #f0f0f2 0%, #fafafa 50%, #e8e8eb 100%);
    --gradient-panel: linear-gradient(135deg, rgba(250,250,250,0.95) 0%, rgba(245,245,247,0.9) 100%);
    --gradient-elevated: linear-gradient(135deg, #fafafa 0%, #f0f0f2 100%);
    --error-dim: rgba(220,38,38,0.1);
    --error-glow: rgba(220,38,38,0.25);

    --shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================
   CYAN THEME
   ============================================ */
[data-theme="cyan"] {
    --accent: #00bcd4;
    --accent-hover: #26c6da;
    --accent-dim: rgba(0, 188, 212, 0.1);
    --accent-mid: rgba(0, 188, 212, 0.15);
    --accent-bright: rgba(0, 188, 212, 0.2);
    --accent-glow: rgba(0, 188, 212, 0.3);
    --accent-faint: rgba(0, 188, 212, 0.08);

    --bg-base: #0a0a0a;
    --bg-page: #1a1a1a;
    --bg-panel: #1f1f1f;
    --bg-elevated: #2d2d2d;
    --bg-hover: #252525;
    --bg-input: #121212;
    --bg-sidebar: #161616;
    --bg-surface: var(--bg-panel);
    --bg-header: linear-gradient(90deg, #2d2d2d 0%, #1f1f1f 100%);
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --border-radius: 6px;

    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-muted: #b0b0b0;
    --text-inverse: #000;

    --border: #333;
    --border-light: #444;
    --border-accent: var(--accent);

    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --danger: #f44336;

    --prio-dim: rgba(76, 175, 80, 0.2);
    --prio-text: #a5d6a7;
    --poor-dim: rgba(244, 67, 54, 0.2);
    --poor-text: #ef9a9a;

    --gradient-accent: linear-gradient(135deg, var(--accent) 0%, #006064 100%);
    --gradient-accent-hover: linear-gradient(135deg, var(--accent-hover) 0%, #00838f 100%);
    --gradient-surface: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
    --gradient-sidebar: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
    --gradient-sidebar-accent: linear-gradient(90deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 188, 212, 0.05) 100%);
    --gradient-page: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f1a1c 100%);
    --gradient-panel: linear-gradient(135deg, rgba(31,31,31,0.95) 0%, rgba(45,45,45,0.9) 100%);
    --gradient-elevated: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    --error-dim: rgba(244,67,54,0.15);
    --error-glow: rgba(244,67,54,0.3);
}

/* ============================================
   RED THEME
   ============================================ */
[data-theme="red"] {
    --accent: #ff2a2a;
    --accent-hover: #ff4d4d;
    --accent-dim: rgba(255, 42, 42, 0.1);
    --accent-mid: rgba(255, 42, 42, 0.15);
    --accent-bright: rgba(255, 42, 42, 0.2);
    --accent-glow: rgba(255, 42, 42, 0.3);
    --accent-faint: rgba(255, 42, 42, 0.08);

    --bg-base: #0a0a0a;
    --bg-page: #1a1a1a;
    --bg-panel: #1f1f1f;
    --bg-elevated: #2d2d2d;
    --bg-hover: #252525;
    --bg-input: #121212;
    --bg-sidebar: #161616;
    --bg-surface: var(--bg-panel);
    --bg-header: linear-gradient(90deg, #2d2d2d 0%, #1f1f1f 100%);

    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-muted: #b0b0b0;
    --text-inverse: #000;

    --border: #333;
    --border-light: #444;
    --border-accent: var(--accent);

    --success: #4caf50;
    --error: #ff2a2a;
    --warning: #ff9800;
    --danger: #ff2a2a;

    --prio-dim: rgba(255, 215, 0, 0.15);
    --prio-text: #ffd54f;
    --poor-dim: rgba(120, 120, 120, 0.15);
    --poor-text: #bdbdbd;

    --gradient-accent: linear-gradient(135deg, #ff2a2a 0%, #8b0000 100%);
    --gradient-accent-hover: linear-gradient(135deg, #ff4d4d 0%, #a52a2a 100%);
    --gradient-surface: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
    --gradient-sidebar: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
    --gradient-sidebar-accent: linear-gradient(90deg, rgba(255, 42, 42, 0.1) 0%, rgba(255, 42, 42, 0.05) 100%);
    --gradient-page: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #1a0a0a 100%);
    --gradient-panel: linear-gradient(135deg, rgba(31,31,31,0.95) 0%, rgba(45,45,45,0.9) 100%);
    --gradient-elevated: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    --error-dim: rgba(255,42,42,0.15);
    --error-glow: rgba(255,42,42,0.3);
}

/* ============================================
   PURPLE / AMETHYST THEME
   ============================================ */
[data-theme="purple"] {
    --accent: #a855f7;
    --accent-hover: #c084fc;
    --accent-dim: rgba(168, 85, 247, 0.1);
    --accent-mid: rgba(168, 85, 247, 0.15);
    --accent-bright: rgba(168, 85, 247, 0.2);
    --accent-glow: rgba(168, 85, 247, 0.3);
    --accent-faint: rgba(168, 85, 247, 0.08);

    --bg-base: #0a0a0a;
    --bg-page: #1a1a1a;
    --bg-panel: #1f1f1f;
    --bg-elevated: #2d2d2d;
    --bg-hover: #252525;
    --bg-input: #121212;
    --bg-sidebar: #161616;
    --bg-surface: var(--bg-panel);
    --bg-header: linear-gradient(90deg, #2d2d2d 0%, #1f1f1f 100%);
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --border-radius: 6px;

    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-muted: #b0b0b0;
    --text-inverse: #000;

    --border: #333;
    --border-light: #444;
    --border-accent: var(--accent);

    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --danger: #f44336;

    --prio-dim: rgba(76, 175, 80, 0.2);
    --prio-text: #a5d6a7;
    --poor-dim: rgba(244, 67, 54, 0.2);
    --poor-text: #ef9a9a;

    --gradient-accent: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
    --gradient-accent-hover: linear-gradient(135deg, #c084fc 0%, #7e22ce 100%);
    --gradient-surface: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
    --gradient-sidebar: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
    --gradient-sidebar-accent: linear-gradient(90deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
    --gradient-page: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0a1f 100%);
    --gradient-panel: linear-gradient(135deg, rgba(31,31,31,0.95) 0%, rgba(45,45,45,0.9) 100%);
    --gradient-elevated: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    --error-dim: rgba(244,67,54,0.15);
    --error-glow: rgba(244,67,54,0.3);
}

/* ============================================
   THEME TRANSITIONS
   ============================================ */
[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme] * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text colors */
.text-accent { color: var(--accent) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-success { color: var(--success) !important; }
.text-error { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

/* Background colors */
.bg-base { background: var(--bg-base) !important; }
.bg-page { background: var(--bg-page) !important; }
.bg-panel { background: var(--bg-panel) !important; }
.bg-elevated { background: var(--bg-elevated) !important; }
.bg-input { background: var(--bg-input) !important; }
.bg-accent-dim { background: var(--accent-dim) !important; }
.bg-accent-mid { background: var(--accent-mid) !important; }
.bg-accent-bright { background: var(--accent-bright) !important; }
.bg-accent-faint { background: var(--accent-faint) !important; }

/* Border colors */
.border-base { border-color: var(--border) !important; }
.border-light { border-color: var(--border-light) !important; }
.border-accent { border-color: var(--border-accent) !important; }

/* Gradient backgrounds */
.bg-gradient-accent { background: var(--gradient-accent) !important; }
.bg-gradient-accent-hover:hover { background: var(--gradient-accent-hover) !important; }

/* Theme Switcher UI */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-switcher button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--transition);
}

.theme-switcher button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.theme-switcher button.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}