/* 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). */
@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:
 *  - status 12% dim fills (Section 3: "text + dim background fill, 12% opacity")
 *  - 4px spacing scale (Section 5: 4 / 8 / 12 / 16 / 24 / 32 / 48) */
:root {
  --status-success-dim: rgba(61, 214, 140, 0.12);
  --status-warning-dim: rgba(232, 131, 58, 0.12);
  --status-danger-dim: rgba(240, 82, 79, 0.12);
  --status-info-dim: rgba(91, 141, 239, 0.12);

  --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: 14px;
  line-height: 1.5;
  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 300ms 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: 14px;
  font-weight: 700;
  text-align: center;
}

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

/* Accessibility floor (VODS Section 8): reduce all motion to <= 50ms. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 50ms !important;
    animation-duration: 50ms !important;
  }
}