:root {
  --nh: 220;

  --accent:        hsl(222 72% 46%);
  --accent-soft:   hsl(222 90% 96%);
  --accent-fg:     hsl(0 0% 100%);
  --focus:         hsl(222 90% 55%);
  --focus-ring:    hsl(222 90% 55% / .20);
  --hl:            hsl(222 80% 96%);

  --glow-a:        hsl(213 92% 62% / .10);
  --glow-b:        hsl(266 82% 62% / .09);
  --glow-c:        hsl(163 70% 46% / .08);

  --brand-a:       hsl(213 78% 48%);
  --brand-b:       hsl(266 58% 56%);
  --brand-glow:    hsl(240 60% 45% / .30);

  --band-junior-fg:     hsl(163 72% 24%);
  --band-junior-soft:   hsl(163 55% 92%);
  --band-junior-line:   hsl(163 40% 74%);
  --band-junior-wash:   hsl(163 55% 98%);

  --band-mid-fg:        hsl(213 78% 38%);
  --band-mid-soft:      hsl(213 88% 93%);
  --band-mid-line:      hsl(213 65% 78%);
  --band-mid-wash:      hsl(213 88% 98.2%);

  --band-senior-fg:     hsl(266 56% 45%);
  --band-senior-soft:   hsl(266 78% 95%);
  --band-senior-line:   hsl(266 48% 82%);
  --band-senior-wash:   hsl(266 78% 98.4%);

  --band-architect-fg:  hsl(26 78% 36%);
  --band-architect-soft:hsl(32 88% 92%);
  --band-architect-line:hsl(32 65% 76%);
  --band-architect-wash:hsl(32 88% 98%);
}

:root[data-theme='dark'] {
  --accent:        hsl(215 92% 66%);
  --accent-soft:   hsl(215 60% 17%);
  --accent-fg:     hsl(222 40% 8%);
  --focus:         hsl(215 95% 68%);
  --focus-ring:    hsl(215 95% 68% / .26);
  --hl:            hsl(215 45% 15%);

  --glow-a:        hsl(213 92% 56% / .13);
  --glow-b:        hsl(266 82% 58% / .12);
  --glow-c:        hsl(163 70% 42% / .09);

  --brand-a:       hsl(213 84% 56%);
  --brand-b:       hsl(266 70% 62%);
  --brand-glow:    hsl(240 70% 50% / .38);

  --band-junior-fg:     hsl(160 62% 60%);
  --band-junior-soft:   hsl(163 38% 16%);
  --band-junior-line:   hsl(163 28% 30%);
  --band-junior-wash:   hsl(163 30% 11%);

  --band-mid-fg:        hsl(211 84% 70%);
  --band-mid-soft:      hsl(213 46% 19%);
  --band-mid-line:      hsl(213 34% 34%);
  --band-mid-wash:      hsl(213 36% 12%);

  --band-senior-fg:     hsl(267 82% 78%);
  --band-senior-soft:   hsl(266 38% 21%);
  --band-senior-line:   hsl(266 28% 36%);
  --band-senior-wash:   hsl(266 30% 13%);

  --band-architect-fg:  hsl(36 88% 64%);
  --band-architect-soft:hsl(32 44% 18%);
  --band-architect-line:hsl(32 32% 32%);
  --band-architect-wash:hsl(32 34% 11.5%);
}

body::before {
  content: '';
  position: fixed;
  inset: -10% -20% auto;
  height: 46vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 22% 0%, var(--glow-b), transparent 70%),
    radial-gradient(52% 100% at 70% 6%, var(--glow-a), transparent 72%);
  filter: blur(6px);
  opacity: .9;
  animation: auroraDrift 34s var(--ease-in-out) infinite alternate;
}

@keyframes auroraDrift {
  from { transform: translate3d(-3%, 0, 0) scaleX(1); }
  to   { transform: translate3d(3%, 2%, 0) scaleX(1.08); }
}