/* ══════════════════════════════════════════════════════════════
   Davos Deathmatch — design tokens
   Material-inspired dark theme. Single source of truth for colour,
   elevation, motion and type. Everything else consumes these.
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Surfaces (Material 3 elevation-by-tint) ── */
  --surf-0:  #0a0c10;   /* page */
  --surf-1:  #12151c;   /* cards */
  --surf-2:  #191d26;   /* raised */
  --surf-3:  #212632;   /* dialogs */
  --surf-4:  #2a3040;   /* menus */
  --surf-hi: #333b4d;   /* hover wash */

  /* ── Brand: Davos snow + WEF blue + money gold ── */
  --primary:        #4da3ff;
  --primary-dim:    #2b6fb8;
  --on-primary:     #04121f;
  --primary-wash:   #4da3ff1f;

  --accent:         #ffc64d;   /* gold — money, corruption, supers */
  --accent-dim:     #b8871f;
  --on-accent:      #1a1200;
  --accent-wash:    #ffc64d1f;

  --danger:         #ff5468;
  --danger-dim:     #b22b3c;
  --success:        #4ddb92;
  --warn:           #ffa23d;

  /* ── Text ── */
  --text:      #eef2f8;
  --text-2:    #a7b0c0;
  --text-3:    #6d7789;
  --on-dark:   #eef2f8;

  /* ── Lines ── */
  --line:      #ffffff14;
  --line-2:    #ffffff26;
  --focus:     #8fd0ff;

  /* ── Player identity ── */
  --p1:        #4da3ff;
  --p2:        #ff6b8a;

  /* ── Radius ── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* ── Elevation ── */
  --e-1: 0 1px 2px #0008, 0 1px 3px 1px #0006;
  --e-2: 0 1px 2px #0009, 0 2px 6px 2px #0006;
  --e-3: 0 4px 8px 3px #0007, 0 1px 3px #000a;
  --e-4: 0 8px 24px 6px #0008, 0 2px 4px #000b;
  --glow-primary: 0 0 0 1px #4da3ff40, 0 0 24px -4px #4da3ff70;
  --glow-accent:  0 0 0 1px #ffc64d40, 0 0 28px -4px #ffc64d80;

  /* ── Motion (Material emphasized easing) ── */
  --ease-standard:  cubic-bezier(.2, 0, 0, 1);
  --ease-emph:      cubic-bezier(.2, 0, 0, 1);
  --ease-decel:     cubic-bezier(.05, .7, .1, 1);
  --ease-accel:     cubic-bezier(.3, 0, .8, .15);
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);

  --t-fast:   120ms;
  --t-med:    220ms;
  --t-slow:   400ms;

  /* ── Type ── */
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Black", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

/* Motion is decorative here; honour the user's preference globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--surf-0);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

:where(button, input, select) { font: inherit; color: inherit; }

/* Visible, consistent focus ring everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary); color: var(--on-primary); }

/* Thin, themed scrollbars for the few scrollable panes. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surf-hi) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--surf-hi);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}