/*
 * Below The Show — design tokens v2. One set for the rankings site and the league.
 *
 * Color story: a ballfield at first pitch. Forest is structure (bars, the slot
 * column, the one filled button per screen). Mustard is the field mark — the
 * "now" line, the active tab, focus on forest. It never sits on paper as text;
 * it fails contrast there. Brick is reserved for locks and errors.
 *
 * Replaces the mixed --navy/--green/--gold names in league/styles.css, where
 * --green currently holds mustard.
 */
:root {
  /* color */
  --paper: #f4f6f4;
  --paper-sunk: #e6ece8;
  --ink: #14281c;
  --ink-soft: #2e4236;
  --muted: #56665c;
  --chalk: #cbd5ce;
  --chalk-strong: #a9b8ae;
  --forest: #1b4332;
  --forest-deep: #12301f;
  --forest-tint: #dfe9e2;
  --mustard: #f5c518;
  --mustard-ink: #6b5200; /* mustard family dark enough for text on paper (AA) */
  --mustard-strong: #d4a800; /* borders and hover on mustard buttons */
  --mustard-tint: #fff4c7;   /* secondary buttons */
  --brick: #8b1e1e;
  --brick-tint: #f4e3e1;

  /* surfaces: every card, sheet, and input background. Pages never write #fff. */
  --card: #ffffff;
  --card-tint: #fffdf3;
  --line: var(--chalk);
  --glass: rgb(27 67 50 / .88);

  /* live states (shared with the draft room; same meaning everywhere) */
  --live: #1f9d5a;
  --live-soft: #3ddc84;
  --warn: #b97a00;
  --warn-soft: #ffb547;
  --danger: #c0392b;
  --danger-soft: #ff5a4f;

  /* position rails (draft room, rosters, lineups) */
  --pos-c: #8b5cf6; --pos-ci: #3b82f6; --pos-mi: #06b6d4; --pos-of: #22c55e;
  --pos-sp: #f97316; --pos-rp: #ef4444; --pos-twp: #f5c518; --pos-u: #64748b;

  /* card parallels and grades (marketplace rails and glows) */
  --par-base: #9db8a6; --par-refractor: #38bdf8; --par-gold: #f5c518; --par-orange: #f97316;
  --par-red: #ef4444; --par-superfractor: #fde68a; --par-auto: #c084fc;
  --grade-10: #f5c518; --grade-9: #3ddc84; --grade-8: #38bdf8; --grade-raw: #9db8a6;

  /* type: IBM Plex, self-hosted (see @font-face in base.css) */
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale — 1.2 minor third from 16px */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.2rem;
  --t-xl: 1.44rem;
  --t-2xl: 1.728rem;
  --t-3xl: 2.074rem;

  /* space — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* shape: square data, softened controls. Radius encodes "you can press this". */
  --r-control: 6px;
  --r-sheet: 12px;

  /* layout */
  --measure-narrow: 720px;
  --measure-wide: 1180px;
  --bar-h: 56px;
  --hit: 44px; /* minimum touch target */

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
}

/*
 * Night: the draft room's war-room scoreboard, now for the whole site.
 * Same forest and mustard; paper becomes the field at night. Paper tokens are
 * remapped so every existing page darkens correctly; new tokens add the glow.
 */
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #0b1a13;
  --paper-sunk: #11261c;
  --card: #163223;
  --card-tint: #1a3a28;
  --ink: #eef5ef;
  --ink-soft: #cfe0d4;
  --muted: #9db8a6;
  --chalk: #24452f;
  --chalk-strong: #2f5a3e;
  --line: #24452f;
  --forest: #2a7a52;        /* links and outlines need to read on dark */
  --forest-deep: #3ddc84;
  --forest-tint: #1c3f2c;
  --mustard-ink: #f5c518;   /* on dark, mustard is fine as text */
  --mustard-tint: #3a3310;
  --brick: #ff5a4f;
  --brick-tint: #3a1a18;
  --glass: #0f2219;   /* opaque: content never bleeds through the header (Fix 28) */
  --live: #3ddc84;
  --warn: #ffb547;
  --danger: #ff5a4f;
  --glow: 0 0 24px rgb(245 197 24 / .45);
}
:root[data-theme="night"] body {
  background: radial-gradient(1200px 500px at 50% -120px, #1d4a33 0%, var(--paper) 60%) fixed, var(--paper);
}
:root[data-theme="night"] .bar, :root[data-theme="night"] .drawer__head { background: var(--glass); border-bottom: 1px solid var(--line); }
/* No backdrop-filter on .bar: a filter on the header would turn the league dock (position: fixed inside it) into a child of the header. */
:root[data-theme="night"] .bar .tabs { background: var(--glass); backdrop-filter: blur(8px); }
:root[data-theme="night"] .btn--primary { color: #111; }
:root[data-theme="night"] .toast { background: var(--card-tint); color: var(--ink); border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
  }
}

/* Print is always paper: no dark fields, no tickers, no live chrome. */
@media print {
  :root, :root[data-theme="night"] { --paper: #fff; --paper-sunk: #fff; --card: #fff; --card-tint: #fff; --ink: #000; --ink-soft: #222; --muted: #555; --line: #bbb; --chalk: #bbb; --forest: #1b4332; --forest-deep: #0f2a1f; --mustard-ink: #5b4a00; --brick: #8b1e1e; --glass: #fff; --glow: none; }
  :root[data-theme="night"] body { background: #fff; }
  .ticker, .ticker--dock, .reveal, .ring-clock, .live-pill i, .dock, .drawer, .toast-dock, .bar .tabs, .shell-actions, .avatar, .menu-btn, .drawer-scrim, .leaguebar { display: none !important; }
  /* The header prints as a plain white strip with the green-letter logo (Fix 26). */
  .bar { position: static; background: #fff !important; color: #000; border-bottom: 1px solid #bbb; box-shadow: none; }
  .bar__mark img { content: url("/assets/v2/img/logo-wordmark-print@2x.png"); }
  .rail, .hero-live, .mk-stat { break-inside: avoid; box-shadow: none; }
}