:root {
  /* Default palette (used if no .pal-N) */
  --main:   #fff;
  --acc1:   #00ffea;
  --acc2:   #ff00c8;
  --shadow: #000;
}

/* ==== Palette Variants ==== */
.pal-1  { --main: #3ae3c4; --acc1: #187178; --acc2: #1e3957; --shadow: #003927; }
.pal-2  { --main: #ff2340; --acc1: #b90032; --acc2: #410011; --shadow: #160008; }
.pal-3  { --main: #f7f7f7; --acc1: #b0b0b0; --acc2: #2e2e2e; --shadow: #000; }
.pal-4  { --main: #ff69b4; --acc1: #43c0f6; --acc2: #e3ff1a; --shadow: #280146; }
.pal-5  { --main: #d1ff1a; --acc1: #b4ff00; --acc2: #13e1c8; --shadow: #144b2d; }
.pal-6  { --main: #fcb6f7; --acc1: #8ee8fd; --acc2: #b388ff; --shadow: #a184be; }
.pal-7  { --main: #ff78c4; --acc1: #5bfaff; --acc2: #c043ff; --shadow: #430c51; }
.pal-8  { --main: #ffe2fc; --acc1: #a4bafe; --acc2: #e3b0ff; --shadow: #8f9bb3; }
.pal-9  { --main: #c965ff; --acc1: #6f53ff; --acc2: #ff66c4; --shadow: #331245; }
.pal-10 { --main: #22f0d1; --acc1: #fc47c9; --acc2: #ffffff; --shadow: #2e155a; }
.pal-11 { --main: #34f5a3; --acc1: #11a37f; --acc2: #15ff86; --shadow: #063f21; }

/* ========== Universal Utility Classes ========== */

/* --- Text color utilities --- */
.text-main   { color: var(--main, #fff) !important; }
.text-acc1   { color: var(--acc1, #00ffea) !important; }
.text-acc2   { color: var(--acc2, #ff00c8) !important; }
.text-shadow { color: var(--shadow, #000) !important; }

/* --- Background color utilities --- */
.bg-main     { background-color: var(--main, #fff) !important; }
.bg-acc1     { background-color: var(--acc1, #00ffea) !important; }
.bg-acc2     { background-color: var(--acc2, #ff00c8) !important; }
.bg-shadow   { background-color: var(--shadow, #000) !important; }

/* --- Border color utilities --- */
.border-main   { border-color: var(--main, #fff) !important; }
.border-acc1   { border-color: var(--acc1, #00ffea) !important; }
.border-acc2   { border-color: var(--acc2, #ff00c8) !important; }
.border-shadow { border-color: var(--shadow, #000) !important; }

/* --- SVG fill/stroke utilities --- */
.fill-main   { fill: var(--main, #fff) !important; }
.fill-acc1   { fill: var(--acc1, #00ffea) !important; }
.fill-acc2   { fill: var(--acc2, #ff00c8) !important; }
.fill-shadow { fill: var(--shadow, #000) !important; }
.stroke-main   { stroke: var(--main, #fff) !important; }
.stroke-acc1   { stroke: var(--acc1, #00ffea) !important; }
.stroke-acc2   { stroke: var(--acc2, #ff00c8) !important; }
.stroke-shadow { stroke: var(--shadow, #000) !important; }

/* --- Box shadow utility (as example) --- */
.shadow-acc1 { box-shadow: 0 0 12px var(--acc1, #00ffea) !important; }
.shadow-acc2 { box-shadow: 0 0 12px var(--acc2, #ff00c8) !important; }
.shadow-main { box-shadow: 0 0 12px var(--main, #fff) !important; }
.shadow-shadow { box-shadow: 0 0 12px var(--shadow, #000) !important; }

/* ========== Universal Gradient Classes ========== */

/* Static gradient using palette colors */
.gradient {
  background: linear-gradient(
    90deg,
    var(--main, #fff) 0%,
    var(--acc1, #00ffea) 50%,
    var(--acc2, #ff00c8) 100%
  );
  color: var(--main, #fff);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Animated gradient using palette colors */
.gradient-animated {
  background: linear-gradient(
    270deg,
    var(--main, #fff) 0%,
    var(--acc1, #00ffea) 50%,
    var(--acc2, #ff00c8) 100%
  );
  color: var(--main, #fff);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  animation: gradient-move 16s ease-in-out infinite;
}

/* Text uses gradient as its color */
.text-gradient,
.gradient.text-main,
.gradient-animated.text-main {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Animate gradient position for .gradient-animated */
@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== Glitch Styles ========== */
.glitch, .glitch-footer {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: var(--main, #fff);
  text-shadow:
    2px 2px 0 var(--acc1, #00ffea),
    -2px -2px 0 var(--acc2, #ff00c8),
    0 0 2px var(--shadow, #000);
  animation: glitch-color 10s infinite;
  transform-style: preserve-3d;
  transform: perspective(666px) rotateX(4deg) rotateY(-5deg);
}
.glitch-footer { font-size: 3.3rem; text-align: center; }
.glitch-footer span {
  position: absolute;
  top: 0; left: 0;
  color: var(--acc1, #fff444);
  pointer-events: none;
}
.glitch-footer span:nth-child(1) {
  animation: glitch-left 12s infinite;
  color: var(--acc2, #ff00c8);
  z-index: -1;
}
.glitch-footer span:nth-child(3) {
  animation: glitch-right 5s infinite;
  color: var(--acc1, #00ffea);
  z-index: -1;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: -1;
  width: 100%;
}
.glitch::before {
  color: var(--acc2, #ff00c8);
  animation: glitch-left 2s infinite;
}
.glitch::after {
  color: var(--acc1, #00ffea);
  animation: glitch-right 5s infinite;
}
@keyframes glitch-left {
  0%, 100% { transform: translate(0,0); opacity: 0.8; }
  10% { transform: translate(-3px, 2px) skewX(-2deg); }
  20% { transform: translate(-6px, 1px) skewX(1deg); }
  35% { transform: translate(-1px, -1px); }
  60% { transform: translate(-4px, 2px); }
  75% { transform: translate(1px, -3px); }
  80% { transform: translate(-1px, 3px); }
}
@keyframes glitch-right {
  0%, 100% { transform: translate(0,0); opacity: 0.8; }
  12% { transform: translate(4px, -3px) skewY(2deg);}
  23% { transform: translate(7px, 2px) skewY(-1deg);}
  45% { transform: translate(2px, 1px); }
  61% { transform: translate(5px, -1px);}
  74% { transform: translate(-2px, 4px);}
  85% { transform: translate(3px, -2px);}
}
@keyframes glitch-color {
  0%, 100% {
    text-shadow:
      6px 4px 0 var(--acc1, #00ffea),
      -4px -6px 0 var(--acc2, #ff00c8),
      0 0 2px var(--shadow, #000);
  }
  20% {
    text-shadow:
      4px -7px 0 var(--acc2, #ff00c8),
      -12px 22px 0 var(--acc1, #00ffea),
      0 0 4px var(--shadow, #000);
  }
  50% {
    text-shadow:
      2px 7px 0 var(--acc1, #00ffea),
      -16px -7px 0 var(--acc2, #ff00c8),
      0 0 8px var(--shadow, #000);
  }
  70% {
    text-shadow:
      9px 2px 0 var(--acc2, #ff00c8),
      8px -8px 0 var(--acc1, #00ffea),
      0 0 3px var(--shadow, #000);
  }
}