/*   THEME VARIABLES */

body {
    transition: background 0.4s ease, color 0.4s ease;
}

/* Base default */
.theme-base{
  /* --bg-primary: #1E3A8A;
  --bg-secondary: #1a347a;
  --text-color: #f4f4f4;
  --accent: #10B981; */
  --accent: #1E3A8A;
  /* --accent: #10B981; */
  --bg-primary: #F9FAFB;
  --bg-seconday: #fff;
  --text-color: #111827;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --radius: 8px;
}

/* Base Legacy */
.theme-legacy{
  /* --bg-primary: #1E3A8A;
  --bg-secondary: #1a347a;
  --text-color: #f4f4f4;
  --accent: #10B981; */
  --accent: #1E3A8A;
  /* --accent: #10B981; */
  --bg-primary: #F9FAFB;
  --bg-secondary: #ffffff;
  --text-color: #1E3A8A;
  --text: #111827;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --radius: 8px;
}

/* BASE DARK */
.theme-dark {
    --bg-primary: #0f1220;
    --bg-secondary: #16192b;
    --text-color: #e6e8ff;
    --text: #e6e8ff;
    --accent: #6c7cff;
}

/* SUNNY / DAYLIGHT THEMES */
.theme-sunny {
    --bg-primary: #1a1a0f;
    --bg-secondary: #2a2a14;
    --text-color: #fff1c1;
    --text: #fff1c1;
    --accent: #f5c542;
}

.theme-day {
    --bg-primary: #22262f;
    --bg-secondary: #2c313d;
    --text-color: #e5e9f2;
    --text: #e5e9f2;
    --accent: #7fb3ff;
}

/* NIGHT THEMES */
.theme-night {
    --bg-primary: #050611;
    --bg-secondary: #0b0d1f;
    --text-color: #cfd6ff;
    --text: #cfd6ff;
    --accent: #7b8cff;
}

.theme-midnight {
    --bg-primary: #03030a;
    --bg-secondary: #0b0b17;
    --text-color: #c5ccff;
    --text: #c5ccff;
    --accent: #6f7dff;
}

/*  WEATHER THEMES */
.theme-rain {
    --bg-primary: #0b1522;
    --bg-secondary: #111f33;
    --text-color: #d6e4ff;
    --text: #d6e4ff;
    --accent: #4f88ff;
}

.theme-rain-night {
    --bg-primary: #050a14;
    --bg-secondary: #0b1629;
    --text-color: #cdd8ff;
    --text: #cdd8ff;
    --accent: #5c7cff;
}

.theme-storm {
    --bg-primary: #100014;
    --bg-secondary: #1f0029;
    --text-color: #f5d9ff;
    --text: #f5d9ff;
    --accent: #c77dff;
}

.theme-cloudy {
    --bg-primary: #20252e;
    --bg-secondary: #2b303b;
    --text: #d8deea;
    --text-color: #d8deea;
    --accent: #8fa3c8;
}

.theme-foggy {
    --bg-primary: #1a1d24;
    --bg-secondary: #222630;
    --text-color: #d4d7e2;
    --text: #d4d7e2;
    --accent: #9ba7c6;
}

/* ELEMENTAL / FANTASY THEMES */
.theme-ice {
    --bg-primary: #e8f6ff;
    --bg-secondary: #f3fbff;
    --text-color: #023047;
    --text: #023047;
    --accent: #00b4d8;
}

.theme-mystic {
    --bg-primary: #160c2b;
    --bg-secondary: #241047;
    --text-color: #f0e6ff;
    --text: #f0e6ff;
    --accent: #b983ff;
}

.theme-fire {
    --bg-primary: #2b0b0b;
    --bg-secondary: #3d1515;
    --text-color: #ffdede;
    --text: #ffdede;
    --accent: #ff5757;
}

.theme-forest {
    --bg-primary: #0e1c10;
    --bg-secondary: #15291a;
    --text-color: #d5f5d9;
    --text: #d5f5d9;
    --accent: #7cff9a;
}

.theme-snow {
    --bg-primary: #dfe8f3;
    --bg-secondary: #eaf1f9;
    --text-color: #14222f;
    --text: #14222f;
    --accent: #6da8ff;
}

.theme-snow::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0) 25%,
        rgba(235,245,255,0.45) 100%
    );
    z-index: 0;
}

/* BACKGROUND LAYERS */

.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: -5;
}

.bg-layer-a {
    opacity: 1;
}

.bg-fade-in {
    opacity: 1 !important;
}

/* WEATHER OVERLAYS */

body[data-weather="fog"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* background: url('../effects/fog.png'); */
    background-size: cover;
    mix-blend-mode: screen;
    opacity: 0.25;
    z-index: -3;
}

body[data-weather="rain"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* background: url('../effects/rain-overlay.png'); */
    background-size: cover;
    opacity: 0.4;
    z-index: -3;
}

body[data-weather="particles"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* background: url('../effects/particles.gif'); */
    mix-blend-mode: lighten;
    opacity: 0.35;
    z-index: -3;
}

.theme-selector {
    background: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--accent);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    max-width: 160px;
}