:root {
  --nh: 190;

  --accent:        hsl(176 78% 29%);
  --accent-soft:   hsl(176 58% 94%);
  --accent-fg:     hsl(0 0% 100%);
  --focus:         hsl(176 70% 36%);
  --focus-ring:    hsl(176 70% 36% / .22);
  --hl:            hsl(176 58% 96%);

  --glow-a:        hsl(162 72% 46% / .11);
  --glow-b:        hsl(190 82% 50% / .10);
  --glow-c:        hsl(128 58% 44% / .07);

  --brand-a:       hsl(162 72% 36%);
  --brand-b:       hsl(190 80% 40%);
  --brand-glow:    hsl(175 72% 28% / .32);

  --band-junior-fg:     hsl(142 68% 25%);
  --band-junior-soft:   hsl(142 50% 92%);
  --band-junior-line:   hsl(142 38% 72%);
  --band-junior-wash:   hsl(142 50% 97.8%);

  --band-mid-fg:        hsl(190 86% 26%);
  --band-mid-soft:      hsl(188 68% 91%);
  --band-mid-line:      hsl(188 50% 70%);
  --band-mid-wash:      hsl(188 68% 97.6%);

  --band-senior-fg:     hsl(232 60% 47%);
  --band-senior-soft:   hsl(232 88% 95%);
  --band-senior-line:   hsl(232 55% 82%);
  --band-senior-wash:   hsl(232 88% 98.4%);

  --band-architect-fg:  hsl(14 72% 41%);
  --band-architect-soft:hsl(14 86% 93%);
  --band-architect-line:hsl(14 60% 79%);
  --band-architect-wash:hsl(14 86% 98.2%);
}

:root[data-theme='dark'] {
  --accent:        hsl(168 72% 56%);
  --accent-soft:   hsl(168 42% 16%);
  --accent-fg:     hsl(186 45% 8%);
  --focus:         hsl(168 76% 58%);
  --focus-ring:    hsl(168 76% 58% / .26);
  --hl:            hsl(180 34% 14%);

  --glow-a:        hsl(162 72% 44% / .13);
  --glow-b:        hsl(190 82% 48% / .12);
  --glow-c:        hsl(232 70% 50% / .10);

  --brand-a:       hsl(162 68% 44%);
  --brand-b:       hsl(190 76% 48%);
  --brand-glow:    hsl(175 70% 34% / .38);

  --band-junior-fg:     hsl(142 58% 58%);
  --band-junior-soft:   hsl(142 36% 15%);
  --band-junior-line:   hsl(142 26% 29%);
  --band-junior-wash:   hsl(142 28% 10.5%);

  --band-mid-fg:        hsl(186 70% 58%);
  --band-mid-soft:      hsl(186 42% 15%);
  --band-mid-line:      hsl(186 30% 28%);
  --band-mid-wash:      hsl(186 32% 10.5%);

  --band-senior-fg:     hsl(232 88% 74%);
  --band-senior-soft:   hsl(232 42% 20%);
  --band-senior-line:   hsl(232 32% 35%);
  --band-senior-wash:   hsl(232 34% 13%);

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

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .42;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 12%, transparent 78%);
}

:root[data-theme='dark'] body::before { opacity: .55; }