:root {
  /* Obvious, high-contrast values so you can SEE it change */
  --bg: #03040f;          /* nearly black with a hint of blue */
  --panel: #0a1030;       /* deeper indigo panel */
  --text: #e9f3ff;        /* brighter text */
  --muted: #a9c8ff;       /* lighter muted */
  --accent: #00d2ff;      /* cyan neon */
  --accent-2: #9a70ff;    /* purple neon */
  --glow: rgba(0, 210, 255, 0.45);
  --border: rgba(0, 210, 255, 0.20);
}

/* Optional: push a stronger background so the change is obvious */
body {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(0,210,255,0.10), transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, rgba(154,112,255,0.10), transparent 60%),
    var(--bg);
}

/* Optional: punchier tile hover to confirm theme took */
.tile:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset,
              0 0 56px var(--glow);
}
/* Make monochrome SVG icons follow the neon palette */
.tile-icon {
  color: var(--accent);       /* sets currentColor -> bright cyan */
  opacity: 0.95;
  filter: drop-shadow(0 0 10px var(--glow));
}

/* Optional: punchier on hover */
.tile:hover .tile-icon {
  color: var(--accent-2);     /* bluish purple accent on hover */
  filter: drop-shadow(0 0 14px var(--glow));
}

/* If your SVGs use strokes instead of fills, this keeps lines visible */
.tile-icon * {
  stroke: currentColor;
}