/* =====================================================
   DEFAULT (FALLBACK)
===================================================== */
:root {
    --bg-color: #0f0f0f;
    --text-color: #ffffff;
    --primary-color: #ff5f9e;
    --accent-color: #ffd6e8;
}

/* =====================================================
   ROMANTIS 🌸
===================================================== */
body[data-theme="romantis"] {
    --bg-color: radial-gradient(circle at top, #ff7eb3, #1a1a1a);
    --text-color: #fff0f5;
    --primary-color: #ff4d6d;
    --accent-color: #ffd1dc;
}

body[data-theme="romantis"] button {
    box-shadow: 0 0 25px rgba(255,100,160,0.6);
}

body[data-theme="romantis"]::after {
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(2px 2px at 20% 30%, #ffd1dc, transparent),
        radial-gradient(1px 1px at 70% 60%, #fff, transparent);
    animation: starMove 80s linear infinite;
    pointer-events:none;
}

/* =====================================================
   CERIA ☀️
===================================================== */
body[data-theme="ceria"] {
    --bg-color: radial-gradient(circle at top, #56ccf2, #0f2027);
    --text-color: #e8fbff;
    --primary-color: #00c6ff;
    --accent-color: #d4f1ff;
}

body[data-theme="ceria"] button {
    box-shadow: 0 0 25px rgba(0,200,255,0.7);
}

body[data-theme="ceria"]::after {
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(2px 2px at 10% 20%, #e8fbff, transparent),
        radial-gradient(2px 2px at 80% 40%, #ffffff, transparent);
    animation: starMove 60s linear infinite;
    pointer-events:none;
}

/* =====================================================
   ELEGAN ✨
===================================================== */
body[data-theme="elegan"] {
    --bg-color: radial-gradient(circle at top, #2c2c2c, #000000);
    --text-color: #f5f5f5;
    --primary-color: #c9a227;
    --accent-color: #f5e6a8;
}

body[data-theme="elegan"] button {
    box-shadow: 0 0 25px rgba(201,162,39,0.6);
}

body[data-theme="elegan"]::after {
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(1.5px 1.5px at 40% 30%, #f5e6a8, transparent),
        radial-gradient(1px 1px at 60% 70%, #ffffff, transparent);
    animation: starMove 120s linear infinite;
    pointer-events:none;
}

/* =====================================================
   MODE RINDU 🌙
===================================================== */
body.rindu {
    filter: grayscale(0.35) brightness(0.82);
}

/* =====================================================
   STAR MOTION
===================================================== */
@keyframes starMove {
    from { background-position: 0 0; }
    to { background-position: 200px 400px; }
}