:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-secondary: #f1f5f9;
  --surface: rgba(248, 250, 252, 0.92);
  --surface-strong: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --border: #e2e8f0;
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --glow-a: rgba(45, 212, 191, 0.16);
  --glow-b: rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] {
  --bg: #0a0f1a;
  --bg-secondary: #111827;
  --surface: rgba(17, 24, 39, 0.92);
  --surface-strong: #111827;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --border: #1f2937;
  --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --glow-a: rgba(45, 212, 191, 0.18);
  --glow-b: rgba(255, 255, 255, 0.04);
}

.download-tab.is-active {
  background: var(--surface-strong);
  color: var(--text);
  border-color: var(--accent);
}

.linux-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: var(--text-muted);
  -webkit-mask: url("/static/tux.svg") center / contain no-repeat;
  mask: url("/static/tux.svg") center / contain no-repeat;
}

.download-tab.is-active .linux-icon {
  background-color: var(--text);
}

.theme-icon {
  display: none;
}

html[data-theme="light"] .theme-icon-sun,
html[data-theme="dark"] .theme-icon-moon {
  display: block;
}