/**
 * Shared dark-theme tokens for MTG Stream.
 * Keep dark mode only for now; a future light set can override these variables.
 */
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --bg-page: #0a0c10;
  --bg-surface: #0f1115;
  --bg-panel: #12151c;
  --bg-elevated: #171a21;
  --bg-input: #0f1115;
  --bg-hover: #22262f;
  --bg-active: #252a3a;
  --bg-button: #1c2030;

  --border: #2a2f3a;
  --border-strong: #3c4043;

  --text: #e8eaed;
  --text-secondary: #cbd5e1;
  --text-muted: #9aa0a6;
  --text-faint: #94a3b8;

  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-soft: #a78bfa;
  --accent-bg: rgba(124, 58, 237, 0.18);
  --accent-border: rgba(167, 139, 250, 0.28);

  --info: #2563eb;
  --info-soft: #93c5fd;
  --info-bg: rgba(37, 99, 235, 0.18);

  --life: #ef4444;
  --poison: #22c55e;
  --cheat: #f97316;
  --danger: #f87171;
  --danger-bg: #3c2f2f;
  --success: #6ee7b7;
  --success-bg: #1e3a2f;
  --warning: #fde68a;
  --warning-bg: #3a341e;
  --remote: #f59e0b;
  --remote-soft: #fcd34d;
  --remote-bg: rgba(245, 158, 11, 0.06);
  --remote-border: rgba(245, 158, 11, 0.45);

  --selection: #38bdf8;
  --focus-ring: rgba(167, 139, 250, 0.55);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* Radius scale — `--radius` stays the 4px control default. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Depth: surfaces are flat; these belong to floating chrome only. */
  --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 110ms;
  --dur: 160ms;

  /* Translucent bar chrome (header, floating tabs). */
  --frost-bg: color-mix(in srgb, var(--bg-panel) 76%, transparent);
  /* Denser mix for large overlay panels that must stay readable over board art. */
  --frost-panel-bg: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  /* Menus and popovers, which float above panels and keep the elevated tone. */
  --frost-elevated-bg: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  --frost-blur: 6px;

  --badge-bg: #1e293b;

  /* Control glyphs drawn as background images (select arrow, search clear).
     Stroke colors are literal because `currentColor` does not reach a data URI;
     they track `--text-muted` / `--text-faint`. */
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --field-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");

  --scrollbar-size: 10px;
  --scrollbar-thumb: color-mix(in srgb, var(--border-strong) 85%, var(--text-faint));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-soft) 55%, var(--border-strong));

  /* Neutral until account user colors are mapped onto seats at runtime. */
  --seat-0-solid: #64748b;
  --seat-0-fg: oklch(0.78 0.04 250);
  --seat-0-bg: oklch(0.55 0.04 250 / 0.08);
  --seat-0-border: oklch(0.63 0.04 250 / 0.42);

  --seat-1-solid: #64748b;
  --seat-1-fg: oklch(0.78 0.04 250);
  --seat-1-bg: oklch(0.55 0.04 250 / 0.08);
  --seat-1-border: oklch(0.63 0.04 250 / 0.42);

  --seat-2-solid: #64748b;
  --seat-2-fg: oklch(0.78 0.04 250);
  --seat-2-bg: oklch(0.55 0.04 250 / 0.08);
  --seat-2-border: oklch(0.63 0.04 250 / 0.42);

  --seat-3-solid: #64748b;
  --seat-3-fg: oklch(0.78 0.04 250);
  --seat-3-bg: oklch(0.55 0.04 250 / 0.08);
  --seat-3-border: oklch(0.63 0.04 250 / 0.42);

  --zone-0: var(--seat-0-bg);
  --zone-1: var(--seat-1-bg);
  --zone-2: var(--seat-2-bg);
  --zone-3: var(--seat-3-bg);

  background: var(--bg-page);
  color: var(--text);
}

[data-seat='0'] {
  --seat-solid: var(--seat-0-solid);
  --seat-fg: var(--seat-0-fg);
  --seat-bg: var(--seat-0-bg);
  --seat-border: var(--seat-0-border);
}

[data-seat='1'] {
  --seat-solid: var(--seat-1-solid);
  --seat-fg: var(--seat-1-fg);
  --seat-bg: var(--seat-1-bg);
  --seat-border: var(--seat-1-border);
}

[data-seat='2'] {
  --seat-solid: var(--seat-2-solid);
  --seat-fg: var(--seat-2-fg);
  --seat-bg: var(--seat-2-bg);
  --seat-border: var(--seat-2-border);
}

[data-seat='3'] {
  --seat-solid: var(--seat-3-solid);
  --seat-fg: var(--seat-3-fg);
  --seat-bg: var(--seat-3-bg);
  --seat-border: var(--seat-3-border);
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Transparent border + padding-box clip keeps the thumb inset from the track. */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

/* Author `display` on `.btn` / tabs otherwise wins over the UA `[hidden]` rule. */
[hidden] {
  display: none !important;
}