/* ==========================================================================
   SkillzForge — Theme System
   All themes use colorblind-safe palettes (Okabe-Ito + extensions)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sunrise Theme — deep purple → warm orange
   -------------------------------------------------------------------------- */
body.theme-sunrise {
    --sf-primary:    #D5D200;
    --sf-secondary:  #CC79A7;
    --sf-accent:     #BDE3D5;
    --sf-logo:       #CDC282;
    --sf-tagline:    #A090B0;
    --celestial-tint: #FFFB00;
    --sf-bg:         #627282;
    --sf-surface:    #7EA4C0;
    --sf-surface-2:  #BABABA;
    --sf-text:       #413616;
    --sf-text-muted: #593C77;
    --sf-border:     #4D3B5D;
    --sf-danger:     #E63B2E;
    --sf-success:    #009E73;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Morning Theme — sky blue, fresh greens
   -------------------------------------------------------------------------- */
body.theme-morning {
    --sf-primary:    #0072B2;
    --sf-secondary:  #009E73;
    --sf-accent:     #E69F00;
    --sf-logo:       #E69F00;
    --sf-tagline:    #FFE65D;
    --celestial-tint: #FFD040;
    --sf-bg:         #D4EDF7;
    --sf-surface:    #FFFFFF;
    --sf-surface-2:  #EEF7FD;
    --sf-text:       #1A2A3A;
    --sf-text-muted: #5A7080;
    --sf-border:     #B0D0E8;
    --sf-danger:     #D55E00;
    --sf-success:    #009E73;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Noon Theme — bright blue sky, clean whites
   -------------------------------------------------------------------------- */
body.theme-noon {
    --sf-primary:    #0072B2;
    --sf-secondary:  #009E73;
    --sf-accent:     #008ae6;
    --sf-logo:       #e2e600;
    --sf-tagline:    #8686E7;
    --celestial-tint: #FFF060;
    --sf-bg:         #d3d1c1;
    --sf-surface:    #FFFFFF;
    --sf-surface-2:  #F7FBFF;
    --sf-text:       #8a7022;
    --sf-text-muted: #5A5A7A;
    --sf-border:     #C0D8F0;
    --sf-danger:     #D55E00;
    --sf-success:    #009E73;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Afternoon Theme — golden warmth
   -------------------------------------------------------------------------- */
body.theme-afternoon {
    --sf-primary:    #D55E00;
    --sf-secondary:  #0072B2;
    --sf-accent:     #E69F00;
    --sf-logo:       #E69F00;
    --sf-tagline:    #c59669;
    --celestial-tint: #FFB020;
    --sf-bg:         #FFF8E1;
    --sf-surface:    #FFFBF0;
    --sf-surface-2:  #FFF3CC;
    --sf-text:       #3D2B1F;
    --sf-text-muted: #8D6B5F;
    --sf-border:     #F0D8A0;
    --sf-danger:     #D55E00;
    --sf-success:    #009E73;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Sunset Theme — deep orange, purples
   -------------------------------------------------------------------------- */
body.theme-sunset {
    --sf-primary:    #D55E00;
    --sf-secondary:  #CC79A7;
    --sf-accent:     #F0E442;
    --sf-logo:       #F0E442;
    --sf-tagline:    #B090A0;
    --celestial-tint: #FF5010;
    --sf-bg:         #1A0820;
    --sf-surface:    #28142E;
    --sf-surface-2:  #382040;
    --sf-text:       #FFE8D0;
    --sf-text-muted: #B090A0;
    --sf-border:     #502040;
    --sf-danger:     #FF4040;
    --sf-success:    #00C890;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Evening Theme — deep purple / blue
   -------------------------------------------------------------------------- */
body.theme-evening {
    --sf-primary:    #56B4E9;
    --sf-secondary:  #CC79A7;
    --sf-accent:     #E69F00;
    --sf-logo:       #E69F00;
    --sf-tagline:    #8880A8;
    --celestial-tint: #90A8E0;
    --sf-bg:         #0A0818;
    --sf-surface:    #14102A;
    --sf-surface-2:  #1E1838;
    --sf-text:       #D8D0F0;
    --sf-text-muted: #8880A8;
    --sf-border:     #2E2848;
    --sf-danger:     #D55E00;
    --sf-success:    #009E73;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* --------------------------------------------------------------------------
   Midnight Theme — near black, stars
   -------------------------------------------------------------------------- */
body.theme-midnight {
    --sf-primary:    #56B4E9;
    --sf-secondary:  #CC79A7;
    --sf-accent:     #F0E442;
    --sf-logo:       #F0E442;
    --sf-tagline:    #6868A0;
    --celestial-tint: #6080C0;
    --sf-bg:         #04040C;
    --sf-surface:    #0A0A18;
    --sf-surface-2:  #101028;
    --sf-text:       #C8C8E8;
    --sf-text-muted: #6868A0;
    --sf-border:     #1A1A30;
    --sf-danger:     #FF5555;
    --sf-success:    #00D899;
    --sf-warning:    #E69F00;
    --sf-info:       #56B4E9;
}

/* ==========================================================================
   Seasonal weather animations
   ========================================================================== */

/* Spring — rain particles (CSS-driven) */
.season-spring .weather-canvas { display: block; }

/* Summer — hazy warmth, cloud drift */
.season-summer .weather-overlay { opacity: 0.4; }

/* Fall — warm amber tint */
body.season-fall {
    --sf-accent: #D55E00;
}

/* Winter — cool blue tint */
body.season-winter {
    --sf-secondary: #56B4E9;
}

/* ==========================================================================
   Smooth theme transition
   ========================================================================== */
body {
    transition:
        background-color 0.6s ease,
        color 0.5s ease;
}

.pixel-card,
.site-nav,
.xp-bar-wrapper,
.skill-card,
.group-box {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease;
}

/* .site-header's background-color is driven by JS every frame during moonBase
   scroll (public/js/moonBase.js _updateHeaderBackground) and sampled once on
   page load / theme change (public/js/themes.js _sampleBgHeaderColor). A CSS
   transition here caused a visible fade-in the first time either sets it. */
.site-header {
    transition: border-color 0.4s ease;
}