/*
 * WARDOGS League - design tokens.
 * Authoritative source: specs/09-design-system.md. This file carries only what
 * cannot be expressed as a Tailwind utility: the token definitions themselves,
 * the enforcement floor, the live pulse, and the crest/zone primitives.
 *
 * This stylesheet is for the PUBLIC SITE ONLY. Filament ships its own compiled
 * CSS and its own Tailwind v4; the staff panel is a separate styling world and
 * must never load this file.
 */

:root {
  /* ground */
  --page:        #F2F3F5;
  --surface:     #FFFFFF;
  --surface-alt: #FAFAFB;
  --zebra:       #E7EAEF;
  --line:        #DDE1E6;
  --line-strong: #C3C9D0;

  /* text */
  --ink:   #14171A;
  --muted: #5B6570;
  --faint: #6E7884;

  /*
   * Factions - DATA ENCODING ONLY, never chrome. Namespaced on purpose: a
   * reviewer grepping for "--faction-" sees every legitimate use at once, and
   * any bare hex of these values outside this block is a violation.
   * Permitted uses, and no others: a crest fill, a 3px top border on a match
   * centre column, a 3px left marker in a player row, a zone-control segment.
   */
  --faction-lonestar:  #1B5FBF;
  --faction-valkyra:   #BE1E2D;
  --faction-manticore: #1B7A3F;

  /* state - live is amber because red belongs to Valkyra */
  --live:     #B8560F;
  --positive: #1B7A3F;

  /* density */
  --nav-h:        52px;
  --row-h:        64px;
  --row-h-compact:48px;
  --header-h:     36px;
  --gutter:       28px;
}

/*
 * Enforcement floor. Radius and shadow are zeroed in the inline Tailwind config
 * (layouts/app.blade.php); this repeats it in plain CSS so the rule still holds
 * if the CDN config ever fails to apply, and so no third-party snippet can
 * reintroduce the one-radius-one-shadow surface that four independent sources
 * name as an AI tell. Scoped to .wd-root, so Filament is untouched.
 */
.wd-root, .wd-root *, .wd-root *::before, .wd-root *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

html { background: var(--page); }

body {
  background: var(--page);
  color: var(--ink);
  font-family: Geist, system-ui, sans-serif;
  /* Every score, rating and count aligns in a column. Inherited globally. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* An abbreviation must carry a title, but it must not carry a dotted underline
   on every column header - the title is for assistive tech and hover. */
abbr[title] { text-decoration: none; cursor: help; }

/* Focus is ink, never a faction colour. */
.wd-root :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- live -------------------------------------------------------------- */

.wd-live-dot {
  width: 7px;
  height: 7px;
  background: var(--live);
  animation: wd-pulse 1.5s infinite;
}

@keyframes wd-pulse {
  0%   { opacity: .1; }
  50%  { opacity: 1; }
  100% { opacity: .1; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-live-dot { animation: none; opacity: 1; }
}

/* ---- crest ------------------------------------------------------------- */

/*
 * The keyline. The Premier League's 2023 rebrand added a white keyline to every
 * club crest to tame wildly different badge designs; on a light ground it
 * matters more, not less, because a white-background logo vanishes without it.
 * Uploaded crests get the keyline baked in by CrestService; the generated
 * fallback shield strokes its own. This class is the guarantee for both.
 */
.wd-crest {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

/* ---- zone control bar -------------------------------------------------- */

.wd-zone { display: flex; height: 8px; width: 100%; background: var(--line); }
.wd-zone-seg { height: 100%; }

/* ---- tables ------------------------------------------------------------ */

.wd-table { width: 100%; border-collapse: collapse; }
.wd-table th {
  /* De-emphasised by colour, never promoted by weight. Bold headers are an
     amateur tell: op.gg forces font-normal on th, the Premier League uses 100. */
  font-weight: 400;
  height: var(--header-h);
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.wd-table td { height: var(--row-h); border-bottom: 1px solid var(--line); }

/* Zebra is applied by adding .wd-zebra to the tbody, and ONLY on tables of
   8 or more columns. Below that, hairlines carry the separation. */
.wd-zebra tr:nth-child(even) { background: var(--zebra); }

/* ---- dashed placeholder ------------------------------------------------ */

.wd-slot-open {
  border: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ---- print ------------------------------------------------------------- */

@media print {
  .wd-no-print { display: none; }
}