/* Weekend Ballot — shared design tokens.
 * Imported FIRST by both tv.css and app.css. Owned by nick; do not edit in a workstream.
 *
 * --c-practice is hot magenta and must appear NOWHERE ELSE in either UI.
 * It is the one signal that says "this is not the real weekend." If it doubles as an
 * error color or an accent, it stops working. Don't reach for it.
 */

:root {
  /* surfaces — dark by default, the TV is on at night */
  --c-bg:        #0a0c11;
  --c-surface:   #141821;
  --c-surface-2: #1d2330;
  --c-line:      #2b3342;

  /* type */
  --c-text:   #f4f7fb;
  --c-muted:  #94a0b5;
  --c-dim:    #5d6879;

  /* vote values — used identically on both surfaces */
  --c-yes:    #34d399;
  --c-maybe:  #fbbf24;
  --c-pass:   #64748b;

  /* accents */
  --c-accent: #5eead4;   /* interactive, links, progress fill */
  --c-gold:   #f5c451;   /* winners, reveal, the itinerary */
  --c-danger: #f87171;   /* errors and failures ONLY */

  /* practice mode — see the warning above */
  --c-practice:    #ff2d95;
  --c-practice-ink: #12000a;

  /* spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --radius:    14px;
  --radius-lg: 24px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-display: var(--font);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --shadow:    0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Practice banner — same markup and behavior on both surfaces.
 * Wrapped in the <!--PRACTICE--> sentinels by each page so the server can splice it out. */
.practice-banner {
  background: var(--c-practice);
  color: var(--c-practice-ink);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-2) var(--s-4);
  width: 100%;
}

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