/* === Color3 Addon: green | purple | blue =========================
   This file overrides CSS variables when body has .color-purple or .color-blue.
   It does NOT change your base (green) styles.
=================================================================== */

/* Purple (light) */
.color-purple{
  --primary:#8b5cf6;
  --secondary:#a78bfa;
  --neon:#a78bfa;
}

/* Purple (dark) */
.theme-dark.color-purple{
  --primary:#8b5cf6;
  --secondary:#a78bfa;
  --neon:#a78bfa;
}


/* Blue (light) */
.color-blue{
  --primary:#3b82f6;
  --secondary:#60a5fa;
  --neon:#60a5fa;
  --bg: radial-gradient(1200px 700px at 20% -10%, #e0f2fe 0%, #eff6ff 55%),
        linear-gradient(180deg, #eaf2ff 0%, #e0f2fe 100%);
  --card:#ffffffcc;
  --text:#0b224a;
  --muted:#1d4ed8;
  --border: rgba(59,130,246,.25);
  --elev:#f0f7ff;
  --soft: rgba(59,130,246,.08);
  --soft-2: rgba(59,130,246,.16);
  --shadow: 0 10px 30px rgba(31,41,55,.08);
  --shadow-hover: 0 16px 40px rgba(31,41,55,.12);
  --progress-bg: rgba(59,130,246,.18);
  --progress-border: rgba(59,130,246,.26);
}
/* Blue (dark) */
.theme-dark.color-blue{
  --bg: radial-gradient(1200px 700px at 20% -10%, #0e1235 0%, #061026 60%),
        linear-gradient(180deg, #0b1430 0%, #10172a 100%);
  --card: rgba(9,16,40,.78);
  --text:#e6f1ff;
  --muted:#bfdbfe;
  --border: rgba(96,165,250,.28);
  --elev:#0a1326;
  --soft: rgba(96,165,250,.08);
  --soft-2: rgba(96,165,250,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --shadow-hover: 0 16px 40px rgba(0,0,0,.52);
  --progress-bg: rgba(96,165,250,.22);
  --progress-border: rgba(96,165,250,.32);
}

.nebula-color-toggle{ margin-left:.5rem; }

/* Right-aligned button group */
.nebula-actions{ display:flex; gap:.5rem; margin-left:auto; }


/* === Purple sky + twinkling stars (CSS-only) ===================== */
/* Ensure purple background gradient closer to the mock */
.color-purple{
  --primary:#8b5cf6;
  --secondary:#a78bfa;
  --neon:#a78bfa;
}

.theme-dark.color-purple{
  --primary:#8b5cf6;
  --secondary:#a78bfa;
  --neon:#a78bfa;
}


/* Twinkle: make .particle look like white stars and flicker softly */
.color-purple .particles{ opacity:1; }
.color-purple .particle{
  background:#fff !important;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,.25);
  animation: nebulaTwinkle 4.2s ease-in-out infinite;
}

/* Variation via nth-child: different durations & delays */
.color-purple .particle:nth-child(3n){ animation-duration:3.6s; }
.color-purple .particle:nth-child(4n){ animation-duration:5.1s; }
.color-purple .particle:nth-child(5n){ animation-duration:6.0s; }
.color-purple .particle:nth-child(7n){ animation-delay:.9s; }
.color-purple .particle:nth-child(11n){ animation-delay:1.8s; }
.color-purple .particle:nth-child(13n){ animation-delay:2.6s; }

@keyframes nebulaTwinkle{
  0%,100%{ opacity:.18; transform:scale(.85); }
  45%{ opacity:.95; transform:scale(1.06); }
  55%{ opacity:.8; transform:scale(.98); }
}

/* Fix background logic: purple light vs dark */
.color-purple:not(.theme-dark){
  --bg: radial-gradient(1300px 800px at 18% -12%, #1b1f4a 0%, #0e1639 55%),
        linear-gradient(180deg, #0b1231 0%, #1a1040 100%);
  --card:#ffffffcc;
  --text:#e7e8ff;
  --muted:#cbd5ff;
  --border: rgba(139,92,246,.22);
  --elev: rgba(255,255,255,.06);
  --soft: rgba(139,92,246,.08);
  --soft-2: rgba(139,92,246,.16);
  --progress-bg: rgba(139,92,246,.15);
  --progress-border: rgba(139,92,246,.26);
}
.theme-dark.color-purple{
  --bg: radial-gradient(1300px 800px at 18% -12%, #191e47 0%, #0b1231 55%),
        linear-gradient(180deg, #0a0f28 0%, #1a1031 100%);
  --card: rgba(33,21,58,.78);
  --text:#ecebff;
  --muted:#c4b5fd;
  --border: rgba(167,139,250,.28);
  --elev:#151433;
  --soft: rgba(167,139,250,.08);
  --soft-2: rgba(167,139,250,.18);
  --progress-bg: rgba(167,139,250,.22);
  --progress-border: rgba(167,139,250,.32);
}

/* Tiny meteor */
.meteor{
  position:absolute;
  width:2px; height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,.45);
  opacity:0;
  pointer-events:none;
  animation: nebulaMeteor 1.8s ease-out forwards;
}
@keyframes nebulaMeteor{
  0%{ left:-4%; top:45%; opacity:0; transform:translate3d(0,0,0) scale(.9); }
  10%{ opacity:1; }
  100%{ left:90%; top:85%; opacity:0; transform:translate3d(0,0,0) scale(.7); }
}


/* === Accent palettes (components only) === */
.accent-blue{
  --primary:#3b82f6;  /* blue-500 */
  --secondary:#60a5fa;
  --neon:#60a5fa;
}
.accent-purple{
  --primary:#8b5cf6;  /* violet-500 */
  --secondary:#a78bfa;
  --neon:#a78bfa;
}
/* accent-green uses your base variables; class is optional */


/* === Background schemes (decoupled from accent) === */
.bg-light{
  --bg:#ffffff;
}
.bg-dark{ /* keep theme-dark compatibility */
}
/* === Purple background scheme (starry night) with purple panels === */
.bg-purple{
  /* Background gradient */
  --bg: radial-gradient(1300px 800px at 18% -12%, #191e47 0%, #0b1231 55%),
        linear-gradient(180deg, #0a0f28 0%, #1a1031 100%);

  /* Surfaces & text tuned for purple night */
  --card: rgba(33,21,58,.78);          /* panels */
  --elev: #151433;                     /* subtle elevated chips */
  --text: #ecebff;                     /* main text */
  --muted: #c4b5fd;                    /* secondary text */
  --border: rgba(167,139,250,.28);     /* outline */
  --soft: rgba(167,139,250,.08);       /* list/bg soft layer */
  --soft-2: rgba(167,139,250,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --shadow-hover: 0 16px 40px rgba(0,0,0,.52);
  --progress-bg: rgba(167,139,250,.22);
  --progress-border: rgba(167,139,250,.32);
}

/* Twinkling stars for bg-purple */
.bg-purple .particles{ opacity:1; }
.bg-purple .particle{
  background:#fff !important;
  border-radius:50%;
  box-shadow:0 0 5px rgba(255,255,255,.25);
  animation: nebulaTwinkle 4.2s ease-in-out infinite;
  transform: scale(.6);
}
.bg-purple .particle:nth-child(3n){ animation-duration:3.4s; }
.bg-purple .particle:nth-child(4n){ animation-duration:5.0s; }
.bg-purple .particle:nth-child(5n){ animation-duration:6.2s; }
.bg-purple .particle:nth-child(7n){ animation-delay:.8s; }
.bg-purple .particle:nth-child(11n){ animation-delay:1.6s; }
.bg-purple .particle:nth-child(13n){ animation-delay:2.4s; }

@keyframes nebulaTwinkle{
  0%,100%{ opacity:.16; transform:scale(.65); }
  45%{ opacity:.95; transform:scale(1.0); }
  55%{ opacity:.8; transform:scale(.92); }
}

/* tiny meteors */
.meteor{
  position:absolute;
  width:2px; height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,.45);
  opacity:0;
  pointer-events:none;
  animation: nebulaMeteor 1.8s ease-out forwards;
}
@keyframes nebulaMeteor{
  0%{ left:-4%; top:45%; opacity:0; transform:translate3d(0,0,0) scale(.9); }
  10%{ opacity:1; }
  100%{ left:90%; top:85%; opacity:0; transform:translate3d(0,0,0) scale(.7); }
}