/* ==========================================================================
   THEME & SKIN CONFIGURATION
   Customize colors, borders, and visual skins via CSS custom properties.
   ========================================================================== */

:root {
    --bg-color: #050505;
    --text-color: #FFFF00;
    --tagline-shadow: rgba(255, 255, 0, 0.35);
    --logo-drop-shadow: rgba(255, 255, 255, 0.15);
    --ring-color: rgba(255, 255, 0, 0.5);
    --dot-color: #FFD700;
    --viewport-border: rgba(255, 255, 0, 0.2);
    --progress-color: #FFFF00;
    --counter-bg: rgba(20, 20, 20, 0.65);
    --ui-btn-bg: rgba(20, 20, 20, 0.65);
    --copyright-color: rgba(255, 255, 0, 0.45);
    --wish-overlay-bg: rgba(0, 0, 0, 0.7);
    --wish-card-bg: rgba(12, 12, 12, 0.92);
    --wish-input-bg: rgba(255, 255, 255, 0.06);
    --wish-input-bg-focus: rgba(255, 255, 255, 0.1);
    --wish-input-border: rgba(255, 255, 0, 0.35);
    --wish-error-color: #FF4D6D;
}

/* --- LIGHT SKIN (STATIC RAINBOW GRADIENT ACCENTS) --- */
body.light-mode {
    --bg-color: #FFFFFF;
    --text-color: #000000;
    --tagline-shadow: transparent;
    --logo-drop-shadow: rgba(0, 0, 0, 0.08);
    --ring-color: rgba(255, 0, 85, 0.4);
    --dot-color: #000000;
    --viewport-border: rgba(0, 0, 0, 0.15);
    --counter-bg: rgba(0, 0, 0, 0.05);
    --copyright-color: rgba(0, 0, 0, 0.4);
    --progress-color: url(#rainbow-gradient);
    --wish-overlay-bg: rgba(255, 255, 255, 0.75);
    --wish-card-bg: rgba(255, 255, 255, 0.96);
    --wish-input-bg: rgba(0, 0, 0, 0.04);
    --wish-input-bg-focus: rgba(0, 0, 0, 0.07);
    --wish-input-border: rgba(0, 0, 0, 0.2);
    --wish-error-color: #E0004D;
}

/* Gradient accent styling for Light Mode */
body.light-mode .tagline,
body.light-mode .counter-value,
body.light-mode .wish-modal-title {
    background: linear-gradient(135deg, #FF0055 0%, #9900FF 30%, #00E5FF 65%, #FFB300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

body.light-mode .counter-box {
    border: 2px solid #000000;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 25px;
}

body.light-mode .lang-btn {
    border: 2px solid #000000;
    background: rgba(0, 0, 0, 0.04);
    color: #000000;
    border-radius: 30px;
}

body.light-mode .audio-btn {
    border: 2px solid #000000;
    background: rgba(0, 0, 0, 0.04);
    color: #000000;
    border-radius: 50%;
}

body.light-mode .lang-btn:hover,
body.light-mode .audio-btn:hover {
    background: #000000 !important;
    color: #FFFFFF !important;
}

body.light-mode .lang-btn:hover .lang-dot {
    color: #FFFFFF;
}

body.light-mode .wish-modal-close {
    border: 2px solid #000000;
    color: #000000;
}

body.light-mode .wish-modal-close:hover {
    background: #000000;
    color: #FFFFFF;
}