/* Tema del kit RUNN League.
   Este archivo manda sobre el aspecto de las 73 pantallas. Cambiar un valor de aquí
   repinta todo el lienzo: es el único sitio donde tocar color, tipografía, radios,
   sombras y trazos. Las reglas de wf-kit.css solo consumen estas variables.

   Tema activo: wireframe en grises. Para pasar a la marca se redefine este bloque. */

:root {
  /* ---------- Tinta: texto, iconos y superficies oscuras ---------- */
  --ink: #1c1c1c;          /* principal */
  --ink-2: #3a3a3a;        /* cuerpo de texto */
  --ink-3: #555;           /* secundario */
  --ink-4: #7a7a7a;        /* terciario, etiquetas */
  --ink-5: #9a9a9a;        /* débil, marcadores de posición */

  /* ---------- Superficies ---------- */
  --bg: #fff;              /* fondo de la pantalla y de las tarjetas */
  --surface: #f4f4f4;      /* fondo suave */
  --surface-2: #ececec;    /* fondo de piezas: chips, iconos, botón terciario */

  /* ---------- Líneas y bordes ---------- */
  --line: #e2e2e2;         /* separadores */
  --line-2: #cfcfcf;       /* contornos de campo */
  --borde: 1.5px;          /* grosor de contorno */
  --borde-fuerte: 2px;     /* contorno de estado activo */

  /* ---------- Barras de texto simulado ---------- */
  --bar: #c4c4c4;
  --bar-2: #dcdcdc;

  /* ---------- Sobre fondo oscuro ---------- */
  --on-ink: #fff;
  --on-ink-2: #ddd;        /* cuerpo sobre tinta */
  --on-ink-3: #a8a8a8;     /* secundario sobre tinta */
  --ink-hover: #333;       /* tinta al pasar el ratón */

  /* ---------- Velos y sombras ---------- */
  --veil: rgba(20,20,20,.5);
  --sombra-sm: 0 1px 3px rgba(0,0,0,.12);

  /* ---------- Tipografía ---------- */
  --fuente: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fuente-mono: ui-monospace, Menlo, monospace;

  --t-xl: 56px;            /* cifra protagonista */
  --t-h1: 30px;
  --t-h2: 22px;
  --t-h3: 16px;
  --t-cuerpo: 14.5px;
  --t-peq: 12.5px;
  --t-cap: 11px;           /* rótulo en versales */

  --peso-normal: 500;
  --peso-medio: 600;
  --peso-semi: 650;
  --peso-alto: 700;
  --peso-max: 800;

  /* ---------- Radios ---------- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 26px;
  --r-full: 999px;
  --r-pantalla: 50px;      /* esquina del teléfono */
}