:dark {
    --blur: rgba(0, 13, 45, 0.95);
}

:light {
    --blur: rgba(251, 255, 255, 0.95);  
}

/* body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
} */

/*════════════════════════════════════════════
  1.  COREUI THEME PALettes
════════════════════════════════════════════*/

/* LIGHT — pastel frost (moderate saturation) */
html[data-coreui-theme="light"]{
  --c1: #ffffff;  /* anchor white */
  --c2: #ffe4f0;  /* blush */
  --c3: #f4e4ff;  /* lavender */
  --c4: #e2ecff;  /* sky */
  --c5: #e6fff6;  /* mint */
}


/* DARK — deep rainbow (smooth hue flow) */
html[data-coreui-theme="dark"]{
  --c1:#5c001b;  /* dark crimson  */
  --c2:#7a3300;  /* burnt sienna  */
  --c3:#7a5500;  /* bronze amber  */
  --c4:#004d29;  /* deep forest   */
  --c5:#004a60;  /* teal-ink      */
  --c6:#001a4d;  /* navy blue     */
  --c7:#32004d;  /* royal violet  */
  --c8:#4f0040;  /* rich magenta  */
}


/*════════════════════════════════════════════
  2.  BACKDROP (tiny-load animation)
════════════════════════════════════════════*/
:root{
  --cycle-time: 30s;     /* full sweep 4 min           */
  --step-count: 120;      /* paint once every 2 s       */
}

body{
  margin:0;
  min-height:100vh;
  /* one 8-stop gradient; unused vars collapse in light mode */
  background:linear-gradient(
    -45deg,
    var(--c1) 0%,
    var(--c2) 12.5%,
    var(--c3) 25%,
    var(--c4) 37.5%,
    var(--c5) 50%,
    var(--c6,var(--c5)) 62.5%,
    var(--c7,var(--c3)) 75%,
    var(--c8,var(--c1)) 87.5%,
    var(--c1) 100%
  );
  background-size:400% 400%;                     /* classic mellow wave */
  /* paint/frame = 0 W except once/2 s */
  animation: drift var(--cycle-time) steps(var(--step-count)) infinite alternate;
}

/* one discrete jump every 2 s */
@keyframes drift{
  from{ background-position: 0% 50%; }
  to  { background-position:100% 50%; }
}

/* Motion-sensitive users get a static backdrop */
@media (prefers-reduced-motion:reduce){
  body{ animation:none; }
}