/* ---------------------------------
   GLOBAL COLOR VARIABLES
----------------------------------- */
:root {
  /* TEXT */
  --text-vlight: #e8f5e9;   /* very light / highlights */
  --text-light: #a5d6a7;
  --text-def: #c8e6c9;
  --text-glow: #81c784;

  /* SHADOW */
  --shadow: #0a1a12;

  /* BACKGROUNDS */
  --bg-main: #264d3a;
  --bg-darker: #0b1f16;
  --bg-header: rgba(10, 30, 20, 0.9);
  --bg-container: rgba(20, 50, 35, 0.9);

  /* BUTTONS */
  --button: #2e7d32;
  --button-bright: #4caf50;
  --button-hover: #388e3c;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 20% 30%,
    rgba(129,199,132,0.08),
    transparent 40%
  );
  --ambient-grad-2: radial-gradient(
    circle at 80% 70%,
    rgba(165,214,167,0.06),
    transparent 45%
  );
}

:root.rain-mode {
  /* TEXT */
  --text-vlight: #e0f2f1;
  --text-light: #80cbc4;
  --text-def: #b2dfdb;
  --text-glow: #4db6ac;

  /* SHADOW */
  --shadow: #051f22;

  /* BACKGROUNDS */
  --bg-main: #1b3d3a;
  --bg-darker: #031718;
  --bg-header: rgba(5, 30, 30, 0.9);
  --bg-container: rgba(10, 50, 50, 0.9);

  /* BUTTONS */
  --button: #00796b;
  --button-bright: #26a69a;
  --button-hover: #00897b;
  
  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 20% 30%,
    rgba(77,182,172,0.08),
    transparent 40%
  );
  --ambient-grad-2: radial-gradient(
    circle at 80% 70%,
    rgba(128,203,196,0.06),
    transparent 45%
  );
}

:root.valentine-mode {
  /* TEXT */
  --text-vlight: #fff0f6;     /* soft rose white */
  --text-light: #f4b6c2;      /* blush pink */
  --text-def: #ffd6e5;        /* romantic readable pink */
  --text-glow: #ff5c8a;       /* heart-glow pink */
  /* SHADOW */
  --shadow: #2a0a14;          /* deep wine shadow */
  /* BACKGROUNDS */
  --bg-main: #3a0f1f;         /* dark velvet red */
  --bg-darker: #1c050c;       /* near-black wine */
  --bg-header: rgba(60, 10, 25, 0.92);
  --bg-container: rgba(90, 20, 45, 0.88);
  /* BUTTONS */
  --button: #b1124a;          /* lipstick red */
  --button-bright: #ff4d6d;   /* candy heart */
  --button-hover: #ff758f;    /* soft glow hover */
  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 25% 30%,
    rgba(255,92,138,0.14),
    transparent 45%
  );
  --ambient-grad-2: radial-gradient(
    circle at 75% 70%,
    rgba(255,180,200,0.10),
    transparent 50%
  );
}
:root.prima-aprilis-mode {
  /* TEXT */
  --text-vlight: #ffffff;     /* blinding white */
  --text-light: #00ffff;      /* cyan scream */
  --text-def: #ffff00;        /* clown yellow */
  --text-glow: #ff00ff;       /* radioactive magenta */
  /* SHADOW */
  --shadow: #000000;          /* hard black, no mercy */
  /* BACKGROUNDS */
  --bg-main: #ff0000;         /* circus red */
  --bg-darker: #00ff00;       /* toxic green */
  --bg-header: rgba(0, 0, 255, 0.95);     /* pure blue pain */
  --bg-container: rgba(255, 165, 0, 0.95);/* traffic cone orange */
  /* BUTTONS */
  --button: #ff00ff;          /* magenta madness */
  --button-bright: #00ffff;   /* cyan flashbang */
  --button-hover: #ffff00;    /* retina destroyer */
  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 20% 30%,
    rgba(255,0,255,0.6),
    rgba(0,255,255,0.6),
    rgba(255,255,0,0.6)
  );
  --ambient-grad-2: radial-gradient(
    circle at 80% 70%,
    rgba(0,255,0,0.6),
    rgba(255,0,0,0.6),
    rgba(0,0,255,0.6)
  );
}

:root.dark-mode {
  /* TEXT */
  --text-vlight: #e6e0ff;
  --text-light: #cdb4f6;
  --text-def: #e6ddff;
  --text-glow: #9d4edd;

  /* SHADOW */
  --shadow: #03010a;

  /* BACKGROUNDS */
  --bg-main: #1a2b26;
  --bg-darker: #0d1217;
  --bg-header: rgba(20, 10, 35, 0.92);
  --bg-container: rgba(30, 20, 50, 0.88);

  /* BUTTONS */
  --button: #5a189a;
  --button-bright: #7b2cbf;
  --button-hover: #7b2cbf;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 25% 35%,
    rgba(157,78,221,0.10),
    transparent 42%
  );
  --ambient-grad-2: radial-gradient(
    circle at 75% 65%,
    rgba(100,200,170,0.05),
    transparent 45%
  );
}

:root.halloween-mode {
  /* TEXT */
  --text-vlight: #f3eaff;      /* pale ghostly lavender */
  --text-light: #d6b7ff;       /* soft enchanted purple */
  --text-def: #e8ddff;         /* readable but mystical */
  --text-glow: #ff8c1a;        /* pumpkin ember glow */

  /* SHADOW */
  --shadow: #050307;           /* deep near-black violet */

  /* BACKGROUNDS */
  --bg-main: #0f1a14;          /* dark forest green */
  --bg-darker: #070b09;        /* midnight forest floor */
  --bg-header: rgba(25, 10, 35, 0.92);     /* haunted purple fog */
  --bg-container: rgba(20, 15, 30, 0.88);  /* shadowy violet */

  /* BUTTONS */
  --button: #8a2c0d;           /* burnt pumpkin */
  --button-bright: #ff7a18;    /* glowing jack-o-lantern */
  --button-hover: #ff9a3c;     /* warm ember hover */

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 30% 30%,
    rgba(157,78,221,0.14),     /* magical purple mist */
    transparent 45%
  );
  --ambient-grad-2: radial-gradient(
    circle at 70% 70%,
    rgba(255,140,26,0.10),     /* pumpkin glow */
    transparent 50%
  );
  --ambient-grad-3: radial-gradient(
    circle at 50% 80%,
    rgba(40,90,60,0.12),       /* forest undergrowth */
    transparent 55%
  );
}

:root.colorblind-mode {
  /* TEXT */
  --text-vlight: #ffffff;
  --text-light: #f1faee;
  --text-def: #e5e5e5;
  --text-glow: #ffd166;

  /* SHADOW */
  --shadow: #1a1a1a;

  /* BACKGROUNDS */
  --bg-main: #1d3557;
  --bg-darker: #0b132b;
  --bg-header: rgba(15, 25, 50, 0.95);
  --bg-container: rgba(25, 40, 75, 0.92);

  /* BUTTONS */
  --button: #457b9d;
  --button-bright: #ffd166;
  --button-hover: #ffd166;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 20% 30%,
    rgba(255,209,102,0.10),
    transparent 40%
  );
  --ambient-grad-2: radial-gradient(
    circle at 80% 70%,
    rgba(69,123,157,0.10),
    transparent 45%
  );
}

:root.winter-mode {
  /* TEXT */
  --text-vlight: #ffffff;        /* pure snow */
  --text-light: #eef7f3;         /* snow haze */
  --text-def: #e6f2ee;           /* cold daylight */
  --text-glow: #d6c26a;          /* frosty gold */

  /* SHADOW */
  --shadow: #0a1a16;              /* softened winter shadow */

  /* BACKGROUNDS */
  --bg-main: #1b3d3a;
  --bg-darker: #031718;
  --bg-header: rgba(5, 30, 30, 0.9);
  --bg-container: rgba(10, 50, 50, 0.9);

  /* BUTTONS */
  --button: #a8323a;             
  --button-bright: #ff969d;       /* muted gold */
  --button-hover: #d0101d;       /* festive red */

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 30% 25%,
    rgba(255,255,255,0.55),       /* strong snow glow */
    transparent 55%
  );

  --ambient-grad-2: radial-gradient(
    circle at 70% 75%,
    rgba(47,111,85,0.15),         /* green beneath snow */
    transparent 60%
  );

  --ambient-grad-3: radial-gradient(
    circle at 85% 15%,
    rgba(214,194,106,0.12),       /* golden sparkle */
    transparent 50%
  );
}

:root.spring-mode {
  /* TEXT */
  --text-vlight: #f9fff5;        /* petal white */
  --text-light: #d9f2c4;         /* fresh leaf */
  --text-def: #eaf7dc;           /* readable spring cream */
  --text-glow: #9bd77c;          /* pollen glow */

  /* SHADOW */
  --shadow: #0b1f12;              /* soft earth shadow */

  /* BACKGROUNDS */
  --bg-main: #2f5d3a;             /* new grass */
  --bg-darker: #102a1a;           /* damp soil */
  --bg-header: rgba(30, 70, 45, 0.9);
  --bg-container: rgba(50, 95, 65, 0.9);

  /* BUTTONS */
  --button: #6fbf73;              /* sprout green */
  --button-bright: #b6e388;       /* sunlit leaf */
  --button-hover: #89cf91;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 25% 30%,
    rgba(155,215,124,0.20),       /* pollen cloud */
    transparent 50%
  );

  --ambient-grad-2: radial-gradient(
    circle at 75% 70%,
    rgba(255,220,180,0.15),       /* blossom warmth */
    transparent 55%
  );
}

:root.summer-mode {
  /* TEXT */
  --text-vlight: #fffdf6;        /* sun-bleached white */
  --text-light: #ffe8a3;         /* warm daylight */
  --text-def: #fff1c1;           /* readable warmth */
  --text-glow: #ffd166;          /* golden glow */

  /* SHADOW */
  --shadow: #1a1405;              /* deep dusk shadow */

  /* BACKGROUNDS */
  --bg-main: #355f4a;             /* summer forest */
  --bg-darker: #16281d;           /* shaded ground */
  --bg-header: rgba(40, 70, 55, 0.9);
  --bg-container: rgba(60, 100, 80, 0.9);

  /* BUTTONS */
  --button: #e09f3e;              /* sun bronze */
  --button-bright: #ffd166;       /* firefly gold */
  --button-hover: #f4b942;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 30% 20%,
    rgba(255,209,102,0.25),       /* midday sun */
    transparent 55%
  );

  --ambient-grad-2: radial-gradient(
    circle at 70% 80%,
    rgba(255,180,90,0.15),        /* heat haze */
    transparent 60%
  );
}

:root.autumn-mode {
  /* TEXT */
  --text-vlight: #fff7ec;        /* parchment */
  --text-light: #ffd6a5;         /* harvest wheat */
  --text-def: #ffe8c2;           /* warm readable */
  --text-glow: #ff9f1c;          /* ember glow */

  /* SHADOW */
  --shadow: #2a1408;              /* deep wood shadow */

  /* BACKGROUNDS */
  --bg-main: #4b2e1e;             /* fallen leaves */
  --bg-darker: #1f120a;           /* forest dusk */
  --bg-header: rgba(60, 35, 20, 0.92);
  --bg-container: rgba(80, 50, 30, 0.9);

  /* BUTTONS */
  --button: #c7511f;              /* pumpkin */
  --button-bright: #ff9f1c;       /* autumn sun */
  --button-hover: #e76f51;

  /* AMBIENT GRADIENTS */
  --ambient-grad-1: radial-gradient(
    circle at 30% 35%,
    rgba(255,159,28,0.22),        /* leaf glow */
    transparent 55%
  );

  --ambient-grad-2: radial-gradient(
    circle at 75% 75%,
    rgba(160,90,40,0.18),         /* forest warmth */
    transparent 60%
  );
}

:root.spring-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("https://www.transparenttextures.com/patterns/wild-flowers.png");
  z-index: 0;
}

:root.winter-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("https://www.transparenttextures.com/patterns/fresh-snow.png");
  z-index: 0;
}

:root.halloween-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("https://www.transparenttextures.com/patterns/bo-play.png");
  z-index: 0;
}
:root.valentine-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("https://www.transparenttextures.com/patterns/gray-floral.png");
  z-index: 0;
}


/*season*/

.snowflake {
  position: fixed;
  top: -2rem;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  animation-name: snow-fall;
  animation-timing-function: linear;
}

@keyframes snow-fall {
  to {
    transform: translateY(110vh);
  }
}

.raindrop {
  position: fixed;
  top: -2rem;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  transform: rotate(-20deg); /* tilt raindrop */
  animation-name: rain-fall;
  animation-timing-function: linear;
}

.hearts {
  position: fixed;
  top: -1rem;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  animation-name: rain-fall;
  animation-timing-function: linear;
}

@keyframes rain-fall {
  to {
    transform: translate(20vw, 110vh) rotate(-20deg); /* diagonal fall */
  }
}

@keyframes hearts-fall {
  to {
    transform: translate(20vw, 110vh) rotate(-20deg); /* diagonal fall */
  }
}
.pollen {
  position: fixed;
  top: -2rem;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  opacity: 0.7;
  animation-name: pollen-drift;
  animation-timing-function: linear;
}

@keyframes pollen-drift {
  to {
    transform: translate(15vw, 110vh) rotate(360deg);
  }
}
.firefly {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  animation: firefly-float linear infinite;
}

@keyframes firefly-float {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(10vw, -20vh); opacity: 0; }
}
.leaf-fall {
  position: fixed;
  top: -3rem;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  animation-name: leaf-fall;
  animation-timing-function: linear;
}

@keyframes leaf-fall {
  to {
    transform: translate(-10vw, 110vh) rotate(720deg);
  }
}