/* Design tokens. Everything else in the app reads from here. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --void: #05070b;
  --panel: rgba(13, 17, 25, 0.58);
  --panel-strong: rgba(16, 21, 31, 0.82);
  --panel-raised: rgba(26, 33, 47, 0.72);
  --hairline: rgba(158, 186, 222, 0.14);
  --hairline-strong: rgba(158, 186, 222, 0.26);

  /* Ink */
  --ink: #eef3fa;
  --ink-soft: #b3c1d4;
  --ink-mute: #7c8ba1;
  --ink-faint: #56637a;

  /* Accents */
  --deck-a: #4de0e8;
  --deck-b: #f37bd8;
  --accent: var(--deck-a);
  --good: #7cf7b0;
  --warn: #ffb457;
  --danger: #ff7ca5;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 120ms;
  --base: 220ms;
  --slow: 420ms;

  /* Shape */
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 7px;
  --r-pill: 999px;

  /* Depth */
  --lift: 0 18px 44px rgba(0, 0, 0, 0.46);
  --lift-sm: 0 8px 20px rgba(0, 0, 0, 0.34);
  --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Layout */
  --queue-width: 396px;
  --queue-rail: 52px;
  --gap: 12px;

  font-family: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
    Inter, Roboto, system-ui, sans-serif;
  font-synthesis-weight: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

button, input, select {
  font: inherit;
  color: inherit;
}

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

.micro-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

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