/* Base mínima del Design System: tipo, fondo, foco y objeto "blueprint".
   No es una capa de componentes (esos viven en components/xb-components.css).

   Adaptación respecto al paquete original (21/09/2026): el original
   redefine `html, body`, `h1/h2`, `a`, `:focus-visible` y `::selection` de
   forma GLOBAL. Mientras las pantallas antiguas de XBasket (tema azul
   marino/naranja) sigan vivas, eso las repintaría todas de golpe. Por eso
   esas reglas cuelgan aquí de `.xb-screen`, una clase que activa cada
   pantalla ya migrada. En el corte final de la fase 1 (cuando se retire
   el toggle de tema) se sustituye `.xb-screen` por `html, body` y ya es
   el original. Lo que sí es global es solo lo opt-in: `.blueprint`,
   `.corner` y `.num-tabular`, que nadie usa hasta que lo pida. */

.xb-screen {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.xb-screen h1,
.xb-screen h2,
.xb-screen h3,
.xb-screen h4,
.xb-screen h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin: 0;
}
.xb-screen h1 { font-size: var(--text-lg); }
.xb-screen h2 { font-size: var(--text-base); color: var(--text-muted); }

.xb-screen :focus-visible { outline: 2px solid var(--surface-accent); outline-offset: 2px; }
.xb-screen ::selection { background: var(--surface-accent-soft); color: var(--text-body); }

.xb-screen a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.xb-screen a:hover { color: var(--xb-green); }

/* Puente con el tema antiguo (21/09/2026): dentro de una pantalla migrada
   (`.xb-screen`), las variables de style.css (`--bg/--panel/--text/...`)
   pasan a apuntar a los tokens `--xb-*`. Así todo el CSS antiguo que aún no
   se ha reescrito (formularios, pestañas de gráficos, paneles flotantes...)
   se ve ya con la paleta nueva, sin tocarlo regla a regla. Los colores
   fijos que tuviera ese CSS (hex sueltos) hay que migrarlos a mano. No
   toca los `--color-*` del editor de cancha (los elige el usuario). Se
   retira junto con el toggle de tema, en el corte final de la fase 1. */
.xb-screen {
  /* barras de desplazamiento y controles nativos en claro */
  color-scheme: light;
  --bg: var(--surface-page);
  --panel: var(--surface-card);
  --panel-alt: var(--surface-raised);
  --sidebar: var(--surface-raised);
  --text: var(--text-body);
  --muted: var(--text-muted);
  --accent: var(--surface-accent);
  --accent-contrast: var(--text-inverse);
  --border: var(--border-hairline);
  --danger: var(--state-danger);
  --danger-strong: var(--state-danger);
  --success: var(--state-ok);
}

/* Botones y campos no heredan la fuente del contenedor; `:where` deja la
   especificidad en 0 para no pisar la fuente propia de los componentes. */
:where(.xb-screen) :where(button, input, textarea, select) { font-family: inherit; }

.num-tabular { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Objeto "blueprint": marco de línea fina con marcas de registro "+" en
   las cuatro esquinas. Es la gramática del rediseño — toda tarjeta, ficha
   y figura la lleva. */
.blueprint { position: relative; }
.blueprint > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after {
  content: '';
  position: absolute;
  background: var(--corner-ink);
}
.blueprint > .corner::before { left: 0; right: 0; top: 50%; height: 1px; }
.blueprint > .corner::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.blueprint > .corner.tl { top: calc(var(--corner-size) / -2); left: calc(var(--corner-size) / -2); }
.blueprint > .corner.tr { top: calc(var(--corner-size) / -2); right: calc(var(--corner-size) / -2); }
.blueprint > .corner.bl { bottom: calc(var(--corner-size) / -2); left: calc(var(--corner-size) / -2); }
.blueprint > .corner.br { bottom: calc(var(--corner-size) / -2); right: calc(var(--corner-size) / -2); }