/* Victory Ops Design System (VODS) v1.1 — base layer.
 *
 * The derived layer on top of tokens.css: the self-hosted display webfont, the global
 * element defaults, and the few tokens VODS specifies in prose but the Section 9 block
 * omits. Every rule here traces to a VODS section (cited inline) — nothing is invented.
 * tokens.css MUST load before this file (these rules consume its variables).
 */

/* Display webfont — self-hosted (VODS Section 4). Relative url so collectstatic's
 * manifest storage can hash + rewrite it; do NOT use {% static %} (CSS isn't templated)
 * or an absolute /static/ path (not rewritten).
 *
 * VODS Section 9's block also carries an @font-face rule. It is deliberately NOT
 * transcribed into tokens.css: the doc writes an absolute /static/ path, which the
 * manifest storage leaves alone, and names the file `good_times_rg.woff2` where the
 * shipped asset is `good_times.woff2`. This rule is the implementation; the divergence
 * is recorded rather than reconciled by guesswork (Inc 5 Step 1). */
@font-face {
  font-family: 'Good Times';
  src: url("../fonts/good_times.90ab5726e1df.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* VODS-derived tokens not enumerated in Section 9:
 *  - 4px spacing scale (Section 5: 4 / 8 / 12 / 16 / 24 / 32 / 48)
 * The status 12% dim fills moved to tokens.css when VODS v1.7 named them (§9). */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}

/* Base element defaults (VODS Sections 4 & 5). Dark only — no light mode. */
body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-14);
  line-height: var(--leading-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Universal keyboard-focus treatment (VODS Section 6 / 8). */
:focus-visible {
  outline: 2px solid var(--tv-gold);
  outline-offset: 2px;
}

::placeholder {
  color: var(--text-muted);
}

::selection {
  background: var(--tv-gold-dim);
  color: var(--text-primary);
}

/* Flash messages (e.g. "Successfully signed in as …"). A fixed overlay so they
 * sit on top of the page and their removal never reflows it; toast.js fades +
 * removes them after 3s. Every value derives from a VODS token. */
.toast-messages {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  transition: opacity var(--motion-panel) ease-out;
}

.toast-messages--leaving {
  opacity: 0;
}

.toast-message {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-raised);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: 700;
  text-align: center;
}

.toast-message--success {
  border-color: var(--status-success);
}

/* Accessibility floor (VODS §8): reduce all motion to <= 50ms.
 *
 * TWO MECHANISMS, RATIFIED TOGETHER AT v2.16, because they answer different failures and
 * neither one covers the other:
 *
 *   1. The TOKEN OVERRIDE makes a token truthful to anything that reads it — including
 *      JavaScript, which a clamp cannot reach. Without it, a script reading
 *      `--motion-panel` gets 220ms under reduced motion while the rendered transition
 *      runs at 50ms, and the two disagree with nothing reporting it. Measured before the
 *      override landed: a declared 220ms transition computed 0.05s while the token still
 *      resolved to 220ms.
 *
 *   2. The UNIVERSAL CLAMP catches an inlined duration no token override can reach —
 *      §10's own standing-test failure mode (a rule that names a value gets hardcoded
 *      because there is no name to reach for) arriving in motion. components.css's
 *      `modal-in 200ms` is exactly that, and is correctly clamped here.
 *
 * §8's "implemented once" forbids DUPLICATION, NOT BREADTH — a single universal selector
 * IS one place, and the clause was written against each consumer carrying its own query.
 *
 * WHAT THIS DELIBERATELY DOES NOT DO: neutralize an infinite animation. A duration clamp
 * ACCELERATES one — 1.1s at infinite iteration becomes roughly twenty rotations a second,
 * worse than the untouched original and precisely what this media query exists to
 * prevent. §8: finite animations clamp, infinite animations STOP. An infinite animation
 * therefore declares `animation: none` where it is defined (the only one in the tree is
 * `.pc-spin` in payouts.css), and
 * `test_an_infinite_animation_is_stopped_under_reduced_motion_and_never_merely_clamped`
 * fails if a new one arrives without it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-hover: 50ms;
    --motion-panel: 50ms;
    --motion-rail: 50ms;
    --motion-rail-label: 50ms;
  }

  *,
  *::before,
  *::after {
    transition-duration: 50ms !important;
    animation-duration: 50ms !important;
  }
}