/* Shared Material 3 pastel theme. Primary is seeded from the WoW mage class color (#3FC7EB). */
:root {
  color-scheme: light;
  --primary: #3fc7eb;          /* mage blue: fills, selected states */
  --on-primary: #00313e;
  --primary-ink: #00667e;      /* readable primary for text, icons, focus rings */
  --primary-container: #c9f0ff;
  --on-primary-container: #003a4a;
  --secondary-container: #d6e9f2;
  --on-secondary-container: #0f2730;
  --twitch-container: #ebe2ff;
  --on-twitch-container: #4a2f8f;
  --youtube-container: #ffdcd6;
  --on-youtube-container: #86211a;

  --surface: #f4fafd;
  --surface-lowest: #ffffff;
  --surface-low: #edf5f8;
  --surface-container: #e6eff3;
  --surface-high: #dfe9ed;
  --on-surface: #151d20;
  --on-surface-variant: #3f4b50;
  --outline: #6f7a7f;
  --outline-variant: #c3cdd1;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 28px;

  --class-mix: 34%;            /* how strongly a WoW class color tints a card's video facade */

  --font: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Material 3 dark scheme from the same seed: primary tone 80, containers tone 30,
   surfaces from the neutral palette at tones 6 / 4 / 10 / 12 / 17. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --primary: #5fd4fb;
    --on-primary: #003544;
    --primary-ink: #7dd8f7;
    --primary-container: #004d61;
    --on-primary-container: #bdeaff;
    --secondary-container: #344a53;
    --on-secondary-container: #cfe6f1;
    --twitch-container: #3f3170;
    --on-twitch-container: #e7deff;
    --youtube-container: #73302a;
    --on-youtube-container: #ffdad5;

    --surface: #0f1417;
    --surface-lowest: #0a0f11;
    --surface-low: #171c1f;
    --surface-container: #1b2023;
    --surface-high: #252b2e;
    --on-surface: #dee3e6;
    --on-surface-variant: #bfc8cc;
    --outline: #899296;
    --outline-variant: #40484c;

    --class-mix: 26%;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 15px/1.5 var(--font);
  font-optical-sizing: auto;
}

a { color: var(--primary-ink); }

:focus-visible {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
}

.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}