/* ============================================
   Theme: Dark Celestial
   Deep navy/purple with glowing moon visuals, star accents
   ============================================ */

[data-theme="celestial"],
.theme-celestial {
    --color-bg: #0a0e1a;
    --color-bg-secondary: #111827;
    --color-card-bg: rgba(17, 24, 39, 0.85);
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-border: rgba(148, 163, 184, 0.1);
    --color-input-bg: rgba(15, 23, 42, 0.8);
}

[data-theme="celestial"] body {
    background: var(--color-bg);
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.15), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.1), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.12), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.08), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.1), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 250px 20px, rgba(255,255,255,0.08), transparent),
        radial-gradient(2px 2px at 300px 50px, rgba(255,255,255,0.12), transparent);
    background-size: 320px 100px;
    color: var(--color-text-primary);
}

[data-theme="celestial"] .navbar {
    background: rgba(10, 14, 26, 0.85);
}

[data-theme="celestial"] .settings-content {
    background: #111827;
}

[data-theme="celestial"] .moon-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
    pointer-events: none;
}

[data-theme="celestial"] .login-container {
    background: var(--color-bg);
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.12), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.1), transparent);
    background-size: 320px 100px;
}