/* Paleta — rediseño de XBasket. Papel cálido de parqué en vez del azul
   oscuro de la versión anterior; el verde es el color de trabajo (lo que
   se toca, lo que va bien, lo que suma) y el rojo queda reservado a lo que
   interrumpe el partido: faltas, pérdidas, deshacer, partido en curso. */
:root {
  /* Superficies */
  --xb-paper: #f4f1ec;
  --xb-paper-raised: #e9e3d8;
  --xb-card: #faf8f4;
  --xb-border: #d5d0c5;

  /* Tinta */
  --xb-ink: #17201a;
  --xb-ink-dim: #5f5c55;

  /* Verde — acento y rampa */
  --xb-green: #20693a;
  --xb-green-100: #edf6ef;
  --xb-green-200: #d2e9da;
  --xb-green-300: #aed6bc;
  --xb-green-400: #80bd97;
  --xb-green-500: #4aa06d;
  --xb-green-600: #2d7f4a;
  --xb-green-700: #1b5a33;
  --xb-green-800: #134326;
  --xb-green-900: #0d2e1b;

  /* Rojo — interrupción */
  --xb-red: #e20613;
  --xb-red-100: #fdeded;
  --xb-red-200: #fbd2d4;
  --xb-red-700: #a80c16;
  --xb-red-900: #551010;

  /* Señales de apoyo */
  --xb-blue: #1d4e89;
  --xb-amber: #a97400;

  /* Alias semánticos — usa estos en componentes, no los de arriba */
  --surface-page: var(--xb-paper);
  --surface-card: var(--xb-card);
  --surface-raised: var(--xb-paper-raised);
  --surface-accent: var(--xb-green);
  --surface-accent-soft: var(--xb-green-200);

  --text-body: var(--xb-ink);
  --text-muted: var(--xb-ink-dim);
  --text-inverse: var(--xb-paper);
  --text-link: var(--xb-green-700);

  --border-hairline: var(--xb-border);
  --border-strong: var(--xb-green);

  --state-ok: var(--xb-green-600);
  --state-danger: var(--xb-red);
  --state-info: var(--xb-blue);
  --state-warn: var(--xb-amber);

  /* Roles de partido: el significado, no el color */
  --match-live: var(--xb-red);
  --match-ready: var(--xb-green-600);
  --match-scheduled: var(--xb-blue);
  --match-done: var(--xb-ink-dim);
  --foul-warn: var(--xb-amber);
  --foul-limit: var(--xb-red);
  --sync-ok: var(--xb-green-600);
  --sync-pending: var(--xb-amber);
  --sync-offline: var(--xb-red);

  /* Mejor / peor del equipo en las tablas de estadísticas */
  --stat-best-bg: var(--xb-green-200);
  --stat-best-ink: var(--xb-green-900);
  --stat-worst-bg: var(--xb-red-200);
  --stat-worst-ink: var(--xb-red-900);
}
