:root {
  /* --- Elite Jewel/Gemstone Palette --- */
  --yr-magique-s: 60%;
  --yr-magique-l: 75%;
  --yr-glow-intensity: 0.6;

  /* Turquoise */
  --yr-color-1: hsl(188, 95%, 70%);
  /* Topaz */
  --yr-color-2: hsl(44, 100%, 70%);
  /* Ruby */
  --yr-color-3: hsl(359, 95%, 70%);
  /* Amethyst */
  --yr-color-4: hsl(271, 50%, 70%);
  /* Sapphire */
  --yr-color-5: hsl(225, 95%, 70%);
  /* Emerald */
  --yr-color-6: hsl(140, 95%, 70%);
  /* Diamond */
  --yr-color-7: hsl(200, 15%, 85%);
  /* Amber */
  --yr-color-8: hsl(25, 95%, 65%);
  /* Magenta */
  --yr-color-9: hsl(330, 95%, 70%);
}

/* Base Magical Glow Utility */
[color-before]::before,
[color-after]:not([show-eq])::after {
  transition:
    text-shadow 0.3s ease,
    color 0.3s ease;
}

/* Color Assignments with Subtle "Magical" Glow */
[color-before="1"]::before,
[color-after="1"]:not([show-eq])::after {
  color: var(--yr-color-1) !important;
  text-shadow: 0 0 8px hsla(188, 100%, 70%, 0.7);
}
[color-before="2"]::before,
[color-after="2"]:not([show-eq])::after {
  color: var(--yr-color-2) !important;
  text-shadow: 0 0 8px hsla(24, 100%, 85%, 0.6);
}
[color-before="3"]::before,
[color-after="3"]:not([show-eq])::after {
  color: var(--yr-color-3) !important;
  text-shadow: 0 0 10px hsla(359, 100%, 70%, 0.75);
}
[color-before="4"]::before,
[color-after="4"]:not([show-eq])::after {
  color: var(--yr-color-4) !important;
  text-shadow: 0 0 8px hsla(271, 100%, 70%, 0.7);
}
[color-before="5"]::before,
[color-after="5"]:not([show-eq])::after {
  color: var(--yr-color-5) !important;
  text-shadow: 0 0 10px hsla(225, 100%, 70%, 0.8);
}
[color-before="6"]::before,
[color-after="6"]:not([show-eq])::after {
  color: var(--yr-color-6) !important;
  text-shadow: 0 0 12px hsla(140, 100%, 70%, 0.9);
}
[color-before="7"]::before,
[color-after="7"]:not([show-eq])::after {
  color: var(--yr-color-7) !important;
  text-shadow: 0 0 8px hsla(200, 100%, 90%, 0.6);
}
[color-before="8"]::before,
[color-after="8"]:not([show-eq])::after {
  color: var(--yr-color-8) !important;
  text-shadow: 0 0 10px hsla(25, 100%, 65%, 0.75);
}
[color-before="9"]::before,
[color-after="9"]:not([show-eq])::after {
  color: var(--yr-color-9) !important;
  text-shadow: 0 0 10px hsla(330, 100%, 70%, 0.75);
}