/* ============================================================
   SCORPIO — COLOR TOKENS
   Copiado del Design System (Claude Design) el 01-ago-2026.
   Regla: la base es BLANCO / neutros cálidos muy claros.
   Verde y azul son SOLO acentos (enlaces, botones, bordes,
   iconos, badges, cabeceras de tabla) — nunca fondos grandes.
   ============================================================ */
:root {
  /* --- Marca: Verde Scorpio --- */
  --green: #44B905;            /* verde de marca puro — SOLO elementos gráficos grandes */
  --green-ink: #2C7A00;        /* verde seguro WCAG-AA para TEXTO y ENLACES sobre blanco (~5:1) */
  --green-600: #3AA004;        /* hover de superficies verdes */
  --green-700: #2C7A00;        /* pulsado / verde oscuro */
  --green-100: #E9F7DE;        /* relleno verde sutil (fondo de badge, fila destacada ~10%) */
  --green-50:  #F4FBEE;        /* lavado verde mínimo (~5%) */

  /* --- Marca: Azul Scorpio ("Lila" histórico) --- */
  --blue: #014A7D;             /* azul marino primario — texto, enlaces, cabeceras, botones */
  --blue-ink: #013A63;         /* azul más oscuro para titulares grandes / contraste máximo */
  --blue-600: #0A5C97;         /* hover */
  --blue-700: #013A63;         /* pulsado */
  --blue-400: #3E86B8;         /* acento azul apagado / secundario */
  --blue-100: #E1EEF6;         /* relleno azul sutil (fondo de cabecera de tabla, info) */
  --blue-50:  #F1F7FB;         /* lavado azul mínimo */

  /* --- Escala de neutros cálidos (texto, bordes, superficies) --- */
  --warm-0:   #FFFFFF;
  --warm-50:  #FAFAF7;
  --warm-100: #F4F3EE;
  --warm-200: #E9E7DF;
  --warm-300: #D8D5CA;
  --warm-400: #B7B4A7;
  --warm-500: #8B887C;
  --warm-600: #6A685D;
  --warm-700: #4D4B43;
  --warm-800: #302F2A;
  --warm-900: #1C1B18;

  /* --- Semántico: forma / resultados (G-E-P) --- */
  --form-win:  #44B905;        /* Ganado (G) */
  --form-draw: #E7A200;        /* Empate (E) — ámbar */
  --form-loss: #D8352A;        /* Perdido (P) — rojo */
  --form-win-100:  #E9F7DE;
  --form-draw-100: #FBF0D2;
  --form-loss-100: #FBE3E1;

  /* --- Estado --- */
  --success: #2C7A00;
  --warning: #C77A00;
  --danger:  #C42B21;
  --info:    #014A7D;

  /* ---------- ALIAS SEMÁNTICOS ---------- */
  --surface-page:    var(--warm-50);
  --surface-card:    var(--warm-0);
  --surface-sunken:  var(--warm-100);
  --surface-accent:  var(--blue-50);

  --text-strong:  var(--warm-900);
  --text-body:    var(--warm-800);
  --text-muted:   var(--warm-600);
  /* `--text-faint` APUNTA AL MISMO GRIS QUE `--text-muted`, y no es un descuido.

     Era `--warm-500` (#8B887C), que sobre blanco da 3,55:1 — por debajo del
     4,5:1 que pide WCAG AA para texto normal. Y no vale con oscurecerlo un poco:
     sus siete usos son rótulos de 11 px en mayúsculas y el `placeholder` de los
     campos, todos texto pequeño, y uno cae sobre el crema de `--warm-100`, donde
     el contraste es aún peor. Cualquier gris que cumpla las dos condiciones
     acaba tan cerca de `--warm-600` que la distinción no se ve: no hay sitio
     para un tercer nivel de gris sobre fondo claro sin bajar del mínimo legal.

     Así que el tercer nivel desaparece y la jerarquía la siguen dando el tamaño,
     las mayúsculas y el peso, que es lo que ya hacían los siete usos. El token se
     queda como alias para no tocarlos uno a uno y para poder volver atrás.
     Ahora: 5,04:1 sobre blanco y 4,60:1 sobre el crema. */
  --text-faint:   var(--warm-600);
  --text-invert:  var(--warm-0);
  --text-link:    var(--blue);
  --text-link-hover: var(--blue-600);

  --border-subtle: var(--warm-200);
  --border-default: var(--warm-300);
  --border-strong: var(--warm-400);

  --focus-ring: var(--blue-400);
}