/* ===== ROOT FALLBACK (Default Theme) ===== */
:root {
    --bg: #f4f7fc;
    --surface: #ffffff;
    --surface2: #f8faff;
    --surface3: #ffffff;
    --text: #1e2a3a;
    --text2: #475569;
    --text3: #94a3b8;
    --bg-pattern: none;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.06);
    --task-bg: rgba(255, 255, 255, 0.9);
    --bg-overlay: rgba(0, 0, 0, 0.1);
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --radius: 20px;
    --radius-sm: 12px;
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --bg-blur: blur(16px);
}

/* ===== 16 BACKGROUND CLASSES + SHAPES ===== */
.bg-default {
    --bg: #f4f7fc;
}
.bg-ocean {
    --bg: linear-gradient(135deg, #1a2980, #26d0ce);
}
.bg-sunset {
    --bg: linear-gradient(135deg, #f12711, #f5af19);
}
.bg-forest {
    --bg: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    --bg-pattern: radial-gradient(circle at 20% 80%, rgba(46, 204, 113, 0.15) 0%, transparent 50%);
}
.bg-night {
    --bg: linear-gradient(135deg, #0c0e1a, #1a1a3e, #2d1b4e);
    --bg-pattern: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 200, 0.04) 0%, transparent 30%);
}
.bg-beach {
    --bg: linear-gradient(180deg, #f7dc6f 0%, #f5b041 30%, #5dade2 60%, #1a5276 100%);
}
.bg-modern {
    --bg: linear-gradient(135deg, #0c0e1a, #1a1a3e);
    --bg-pattern: repeating-linear-gradient(45deg, rgba(108, 92, 231, 0.06) 0px,
            rgba(108, 92, 231, 0.06) 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(-45deg, rgba(108, 92, 231, 0.06) 0px,
            rgba(108, 92, 231, 0.06) 2px, transparent 2px, transparent 8px);
}
.bg-city {
    --bg: linear-gradient(180deg, #0c0e1a 0%, #1a1a3e 40%, #2d1b4e 70%, #1a1a3e 100%);
    --bg-pattern: radial-gradient(ellipse at 10% 90%, rgba(255, 200, 100, 0.08) 0%, transparent 30%),
        radial-gradient(ellipse at 90% 85%, rgba(255, 200, 100, 0.06) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 95%, rgba(255, 200, 100, 0.04) 0%, transparent 40%);
}
.bg-lavender {
    --bg: linear-gradient(135deg, #8e44ad, #9b59b6, #a29bfe);
}
.bg-autumn {
    --bg: linear-gradient(135deg, #d35400, #f39c12, #e67e22);
}
.bg-aurora {
    --bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    --bg-pattern: radial-gradient(ellipse at 20% 30%, rgba(0, 255, 200, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 0, 200, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 200, 255, 0.04) 0%, transparent 50%);
}
.bg-rose {
    --bg: linear-gradient(135deg, #ff6b6b, #ee5a24, #6c5ce7);
}
.bg-spring {
    --bg: linear-gradient(135deg, #11998e, #38ef7d);
}
.bg-charcoal {
    --bg: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    --surface: rgba(30, 30, 30, 0.85);
    --surface2: rgba(40, 40, 40, 0.8);
    --surface3: #1e1e1e;
    --text: #e8e8f0;
    --text2: #b0b0b0;
    --text3: #777;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    --border-light: rgba(255, 255, 255, 0.06);
    --task-bg: rgba(30, 30, 30, 0.92);
    --bg-overlay: rgba(0, 0, 0, 0.5);
}
.bg-deepspace {
    --bg: linear-gradient(135deg, #0b0b1a, #1a1a3e, #2d1b4e);
    --bg-pattern: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 80% 70%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 50% 90%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 255, 0.2), transparent);
    --surface: rgba(15, 15, 35, 0.85);
    --surface2: rgba(25, 25, 55, 0.8);
    --surface3: #12122a;
    --text: #e8e8f0;
    --text2: #b0b0cc;
    --text3: #6a6a8a;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    --border-light: rgba(255, 255, 255, 0.06);
    --task-bg: rgba(20, 20, 50, 0.92);
    --bg-overlay: rgba(0, 0, 0, 0.5);
}
.bg-minimal {
    --bg: #ffffff;
    --surface: rgba(240, 240, 245, 0.7);
    --surface2: rgba(230, 230, 235, 0.8);
    --surface3: #ffffff;
    --text: #1a1a2e;
    --text2: #4a4a6a;
    --text3: #8a8aaa;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    --border-light: rgba(0, 0, 0, 0.06);
    --task-bg: #ffffff;
    --bg-overlay: rgba(200, 200, 210, 0.3);
}
.bg-cream {
    --bg: #fdfbf7;
    --surface: rgba(255, 252, 245, 0.85);
    --surface2: rgba(245, 240, 230, 0.8);
    --surface3: #fdfbf7;
    --text: #2a2418;
    --text2: #5a5040;
    --text3: #8a8070;
    --shadow: 0 8px 32px rgba(160, 130, 100, 0.08);
    --border-light: rgba(200, 180, 160, 0.15);
    --task-bg: #ffffff;
    --bg-overlay: rgba(220, 210, 190, 0.2);
}

/* ===== APP SHELL ===== */
#app {
    background: var(--bg);
    transition: background 0.5s ease;
    position: relative;
    min-height: 100vh;
}
#app::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-pattern);
    pointer-events: none;
    z-index: 0;
}
#app>* {
    position: relative;
    z-index: 1;
}

/* ===== DARK MODE OVERRIDES (for backgrounds that need it) ===== */
.dark .bg-default {
    --bg: #0f172a;
}
.dark .bg-minimal {
    --bg: #0f172a;
    --surface: rgba(15, 23, 42, 0.88);
    --surface2: rgba(30, 41, 59, 0.8);
    --surface3: #1e293b;
    --text: #e8e8f0;
    --text2: #94a3b8;
    --text3: #64748b;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --border-light: rgba(255, 255, 255, 0.06);
    --task-bg: rgba(30, 41, 59, 0.92);
    --bg-overlay: rgba(0, 0, 0, 0.4);
}
.dark .bg-cream {
    --bg: #0f172a;
    --surface: rgba(15, 23, 42, 0.88);
    --surface2: rgba(30, 41, 59, 0.8);
    --surface3: #1e293b;
    --text: #e8e8f0;
    --text2: #94a3b8;
    --text3: #64748b;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --border-light: rgba(255, 255, 255, 0.06);
    --task-bg: rgba(30, 41, 59, 0.92);
    --bg-overlay: rgba(0, 0, 0, 0.4);
}