/* ==========================================================================
   ONE DESWIK — FUN THEMES
   Just for a bit of fun. Not for production.
   ========================================================================== */


/* ==========================================================================
   HALLOWEEN THEME
   Pumpkin orange, bone-white text, deep black backgrounds, slime green,
   blood red, and eerie purple — all the classics.
   ========================================================================== */

body.halloween-theme {
  color-scheme: dark;

  --active:            #ff6b00;
  --active-on-selected: #ff8c00;
  --active-primary:    #cc5500;
  --background:        #0a0804;
  --text-color:        #c8a46a;

  --gray-1:  #13100a;
  --gray-2:  #1c170d;
  --gray-3:  #261e10;
  --gray-4:  #322814;
  --gray-5:  #463818;
  --gray-6:  #5e4c22;
  --gray-7:  #8c7040;
  --gray-8:  #b09055;
  --gray-9:  #c8a46a;
  --gray-10: #e8c898;

  --border-1: #3a2808;
  --border-2: #604018;

  --success:            #39ff14;
  --success-bg:         #041a00;
  --success-color-text: #5aff30;

  --warning:            #ff8c00;
  --warning-bg:         #2a1400;
  --warning-color-text: #ffaa33;

  --information:            #9933ff;
  --information-bg:         #1a0040;
  --information-color-text: #bb66ff;

  --error:            #cc2200;
  --error-bg:         #2a0000;
  --error-color-text: #ff4422;

  --incomplete:            #00aacc;
  --incomplete-bg:         #00202a;
  --incomplete-color-text: #22ccee;
}

/* Glowing orange headings */
body.halloween-theme h1,
body.halloween-theme h2 {
  color: var(--active);
  text-shadow: 0 0 12px rgba(255, 107, 0, 0.6), 0 0 24px rgba(255, 107, 0, 0.2);
}
body.halloween-theme h3,
body.halloween-theme h4 {
  color: #cc8833;
}

/* Spooky glow on primary buttons */
body.halloween-theme button.primary {
  background: var(--active);
  border-color: var(--active);
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.7), 0 0 4px rgba(255, 107, 0, 0.4);
}
body.halloween-theme button.primary:hover {
  box-shadow: 0 0 22px rgba(255, 107, 0, 0.9);
}

/* Purple glint on links */
body.halloween-theme a { color: #9933ff; }
body.halloween-theme a:hover { color: #bb66ff; }

/* Subtle spiderweb border on cards */
body.halloween-theme .card {
  border: 1px solid #3a2808;
}
body.halloween-theme .card-1 { background: #131008; }
body.halloween-theme .card-2 { background: #1a1608; }

/* Section dividers in pumpkin */
body.halloween-theme section > h2 {
  border-bottom-color: #3a2808;
}

/* Slime-green success notification glow */
body.halloween-theme .notification.bright.success {
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}


/* ==========================================================================
   NEW EXPERIENCE THEME
   All the colors. All the animations. All at once.
   Not suitable for photosensitive users.
   ========================================================================== */

@keyframes lsd-body-bg {
  0%   { background-color: #0d0020; }
  16%  { background-color: #00100d; }
  33%  { background-color: #1a1000; }
  50%  { background-color: #00001a; }
  66%  { background-color: #150008; }
  83%  { background-color: #0a001a; }
  100% { background-color: #0d0020; }
}

@keyframes rainbow-cycle {
  0%   { color: #ff0080; }
  14%  { color: #ff6600; }
  28%  { color: #ffee00; }
  42%  { color: #00ff80; }
  57%  { color: #00aaff; }
  71%  { color: #8800ff; }
  85%  { color: #ff00cc; }
  100% { color: #ff0080; }
}

@keyframes neon-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--glow-color, #ff00ff), 0 0 12px var(--glow-color, #ff00ff); }
  50%       { box-shadow: 0 0 18px var(--glow-color, #ff00ff), 0 0 36px var(--glow-color, #ff00ff); }
}

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

@keyframes border-rainbow {
  0%   { border-color: #ff0080; }
  16%  { border-color: #ff6600; }
  33%  { border-color: #ffee00; }
  50%  { border-color: #00ff80; }
  66%  { border-color: #00aaff; }
  83%  { border-color: #8800ff; }
  100% { border-color: #ff0080; }
}

body.new-experience-theme {
  animation: lsd-body-bg 14s ease-in-out infinite;

  --active:             #ff00ff;
  --active-on-selected: #ff66ff;
  --active-primary:     #cc00cc;
  --background:         #0d0020;
  --text-color:         #f0e8ff;

  --gray-1:  rgba(255, 0, 255, 0.05);
  --gray-2:  rgba(255, 0, 255, 0.09);
  --gray-3:  rgba(255, 0, 255, 0.14);
  --gray-4:  rgba(255, 0, 255, 0.20);
  --gray-5:  rgba(255, 0, 255, 0.28);
  --gray-6:  rgba(255, 0, 255, 0.38);
  --gray-7:  rgba(255, 200, 255, 0.55);
  --gray-8:  rgba(255, 200, 255, 0.75);
  --gray-9:  rgba(255, 220, 255, 0.88);
  --gray-10: #fff;

  --border-1: rgba(255, 0, 255, 0.35);
  --border-2: rgba(255, 0, 255, 0.55);

  --success:            #00ff88;
  --success-bg:         rgba(0, 255, 136, 0.12);
  --success-color-text: #00ff88;

  --warning:            #ffff00;
  --warning-bg:         rgba(255, 255, 0, 0.12);
  --warning-color-text: #ffff00;

  --information:            #00eeff;
  --information-bg:         rgba(0, 238, 255, 0.12);
  --information-color-text: #00eeff;

  --error:            #ff0066;
  --error-bg:         rgba(255, 0, 102, 0.12);
  --error-color-text: #ff5599;

  --incomplete:            #8800ff;
  --incomplete-bg:         rgba(136, 0, 255, 0.14);
  --incomplete-color-text: #aa44ff;
}

/* Every heading cycles through the rainbow at slightly different speeds/offsets */
body.new-experience-theme h1 { animation: rainbow-cycle 3.0s linear infinite; }
body.new-experience-theme h2 { animation: rainbow-cycle 3.5s linear infinite; animation-delay: -0.8s; }
body.new-experience-theme h3 { animation: rainbow-cycle 4.0s linear infinite; animation-delay: -1.6s; }
body.new-experience-theme h4 { animation: rainbow-cycle 4.5s linear infinite; animation-delay: -0.5s; }
body.new-experience-theme h5 { animation: rainbow-cycle 5.0s linear infinite; animation-delay: -2.1s; }
body.new-experience-theme h6 { animation: rainbow-cycle 5.5s linear infinite; animation-delay: -1.0s; }

/* Animated rainbow border on section dividers */
body.new-experience-theme section > h2 {
  animation: rainbow-cycle 3.5s linear infinite, border-rainbow 3.5s linear infinite;
}

/* Buttons glow in their own colour and pulse */
body.new-experience-theme button {
  --glow-color: rgba(255, 0, 255, 0.6);
  animation: neon-glow-pulse 2.2s ease-in-out infinite;
}

/* Primary: animated rainbow gradient background */
body.new-experience-theme button.primary {
  --glow-color: rgba(255, 0, 200, 0.8);
  background: linear-gradient(270deg, #ff0080, #ff6600, #ffee00, #00ff80, #00aaff, #8800ff, #ff0080);
  background-size: 400% 400%;
  border: none;
  color: #fff;
  font-weight: 600;
  animation: gradient-pan 3s ease infinite, neon-glow-pulse 2.2s ease-in-out infinite;
}

/* Secondary: neon cyan outline */
body.new-experience-theme button.secondary {
  --glow-color: rgba(0, 238, 255, 0.7);
  color: #00eeff;
  border-color: #00eeff;
  background: transparent;
}

/* Error button: crimson to magenta pulse */
body.new-experience-theme button.error {
  --glow-color: rgba(255, 0, 102, 0.8);
  background: #ff0066;
  border-color: #ff0066;
}

/* Transparent button: text cycles rainbow */
body.new-experience-theme button.transparent {
  --glow-color: transparent;
  animation: rainbow-cycle 4s linear infinite;
  box-shadow: none;
}
body.new-experience-theme button.transparent:hover {
  --glow-color: rgba(255, 0, 255, 0.4);
  animation: rainbow-cycle 4s linear infinite, neon-glow-pulse 1.5s ease-in-out infinite;
}

/* Cards: rainbow animated border via gradient border-box trick */
body.new-experience-theme .card {
  background: rgba(255, 0, 255, 0.06);
  animation: border-rainbow 4s linear infinite;
  border-width: 1px;
  border-style: solid;
}

/* Top-bar gets a gradient stripe at the bottom */
body.new-experience-theme .top-bar {
  background: rgba(13, 0, 32, 0.95);
  border-bottom-color: transparent;
  background-image: linear-gradient(rgba(13, 0, 32, 0.95), rgba(13, 0, 32, 0.95)),
                    linear-gradient(90deg, #ff0080, #ff6600, #ffee00, #00ff80, #00aaff, #8800ff, #ff0080);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-bottom: 2px solid transparent;
}

/* Notification blocks: glow in their semantic colour */
body.new-experience-theme .notification.bright.success {
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.5);
}
body.new-experience-theme .notification.bright.error {
  box-shadow: 0 0 14px rgba(255, 0, 102, 0.5);
}
body.new-experience-theme .notification.bright.information {
  box-shadow: 0 0 14px rgba(0, 238, 255, 0.5);
}

/* Links: cycle through rainbow */
body.new-experience-theme a { animation: rainbow-cycle 5s linear infinite; }

/* Properties panel: subtle gradient */
body.new-experience-theme .properties-panel {
  background: rgba(255, 0, 255, 0.06);
  animation: border-rainbow 4s linear infinite;
  border-left-width: 2px;
}

/* Swatch chips: rainbow border on hover */
body.new-experience-theme .swatch:hover {
  animation: border-rainbow 1.5s linear infinite;
}