@import "tailwindcss";

/* Design tokens from docs/UI.md. */
:root {
  --stage: #1b1640;
  --floodlight: #ffd23f;
  --chalk: #f5f7fa;
  --ink: #14213d;
  --signal: #2ec4b6;
  --alert: #e63946;
  /* Alert darkened to pass 4.5:1 as text on white, and as a background under white text. */
  --alert-strong: #c1121f;
}

/* Expose the tokens as Tailwind utilities: bg-stage, text-ink, font-display, ... */
@theme inline {
  --color-stage: var(--stage);
  --color-floodlight: var(--floodlight);
  --color-chalk: var(--chalk);
  --color-ink: var(--ink);
  --color-signal: var(--signal);
  --color-alert: var(--alert);
  --color-alert-strong: var(--alert-strong);
  --font-display: var(--font-big-shoulders), ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-atkinson), ui-sans-serif, system-ui, sans-serif;
}

body {
  background: var(--chalk);
  color: var(--ink);
}

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

/* Scoreboard reveal: a shaking "?" covers the row for a beat (the drum-roll), then the
   cover fades and the team pops in. */
@keyframes reveal-in {
  0%,
  70% {
    transform: scale(1);
  }
  82% {
    transform: scale(1.04);
  }
}

@keyframes reveal-cover {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes reveal-shake {
  0%,
  100% {
    transform: translateX(-0.5vh) rotate(-4deg);
  }
  50% {
    transform: translateX(0.5vh) rotate(4deg);
  }
}

@theme inline {
  --animate-reveal-in: reveal-in 1800ms ease-out both;
}

.reveal-cover {
  animation: reveal-cover 1800ms ease-out both;
}

.reveal-shake {
  display: inline-block;
  animation: reveal-shake 140ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-reveal-in {
    animation: none;
  }

  .reveal-cover {
    display: none;
  }
}