/* ─────────────────────────────────────────────────────────────
   LeakHunter — Tokens canónicos
   ─────────────────────────────────────────────────────────────
   Fuente: las 16 pantallas de "Pantalla Leakhunter" (Carlos).
   Los valores de color NO están estimados: se muestrearon píxel
   a píxel sobre los PNG. Ver design-system.md para el detalle de
   qué pantalla y qué zona dio cada valor.

   Este archivo REEMPLAZA la paleta anterior. Conserva los nombres
   de token existentes (--bg, --surface, --gold…) para que sea un
   drop-in: la pantalla que lo cargue se repinta sin tocar su HTML.

   ⚠️ Todavía no está cableado en la app. Ver §Migración del doc:
   hay 11 definiciones de --gold repartidas entre main.css,
   table.css y 9 HTMLs con :root inline.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Fondo y superficies ───────────────────────────────────
     El cambio de fondo es el más visible del sistema: se pasa de
     un negro azulado (#0D1117) a un negro cálido. Todas las
     superficies suben en warmth, no en brillo. */
  --bg:            #16130E;  /* fondo de página */
  --surface:       #1A1712;  /* card sobre fondo */
  --surface-2:     #1F1C16;  /* card de contenido (mode card, sección) */
  --surface-3:     #211E19;  /* elevado: bottom nav, chips, pill de bankroll */
  --border:        #322D20;  /* borde de card — cálido, no gris neutro */
  --border-light:  #463E29;  /* borde de card destacada / hover */

  /* ── Texto ─────────────────────────────────────────────────
     El blanco es marfil cálido, nunca #FFF puro. */
  --text:          #E9E1D9;  /* títulos y texto principal */
  --text-dim:      #B9B19F;  /* descripciones dentro de card */
  --muted:         #8D8678;  /* meta, ayuda, placeholders */

  /* ── Dorado — color de marca ───────────────────────────────
     Un solo dorado para acción y marca. El brillante es para
     relleno y acento; el claro es para títulos de sección. */
  --gold:          #ECC03F;  /* botón primario, activo, acento */
  --gold-light:    #E5C975;  /* títulos de sección, links */
  --gold-muted:    #94824F;  /* ítems inactivos del bottom nav */
  --gold-dark:     #8E752C;  /* bordes profundos, gradientes */
  --gold-dim:      rgba(236, 192, 63, 0.12);
  --gold-border:   rgba(236, 192, 63, 0.35);
  --on-gold:       #16130E;  /* texto sobre relleno dorado */

  /* ── Acentos semánticos ────────────────────────────────────
     Solo para dato y categoría, nunca para chrome ni CTA. */
  --blue:          #38C1FE;  /* progreso de rango, métricas MTT */
  --green:         #4BE282;  /* XP ganado, completado */
  --orange:        #FF953D;  /* progreso de nivel, racha */
  --red:           #E71900;  /* SOLO dato de juego: fichas de ciega y palos rojos */

  /* ── Error ─────────────────────────────────────────────────
     Alias documentado, deliberadamente separado de --red aunque hoy
     compartan valor. --red es la carta; --error es el fallo. Mantenerlos
     como tokens distintos permite que mañana Carlos defina un rojo de
     interfaz propio cambiando una línea, sin tocar la mesa.
     Ningún mockup muestra un estado de error: este token es una decisión
     de implementación, no un valor tomado del diseño.
     Uso: validación de formularios, fallos de red o de acción, y alertas
     que el usuario debe notar (un leak que empeora). NO para resultados
     normales del juego, como perder una mano. */
  --error:         #E71900;
  --error-dim:     rgba(231, 25, 0, 0.12);
  --error-border:  rgba(231, 25, 0, 0.35);

  --blue-dim:      rgba(56, 193, 254, 0.12);
  --green-dim:     rgba(75, 226, 130, 0.12);
  --orange-dim:    rgba(255, 149, 61, 0.12);

  /* ── Fieltro por modo ──────────────────────────────────────
     Cada modo tiene identidad cromática propia en la mesa.
     No aplicado todavía: la mesa entra en S6 (freeze). */
  --felt-cash:     #1E6B3D;
  --felt-mtt:      #2B2E31;
  --felt-hu:       #5C1F22;
  --felt-spin:     #1B3A72;
  --rail:          #6B4327;  /* madera del riel, común a los 4 modos */

  /* ── Tipografía ────────────────────────────────────────────
     Kaspersky Sans Display es la familia del diseño (confirmada por LF).
     ⚠️ No está en Google Fonts ni hay archivos en el repo todavía: hasta
     que lleguen los .woff2 y se declare el @font-face, el render cae a
     DM Sans. Al agregar la fuente, toda la app cambia sola. */
  --font: 'Kaspersky Sans Display', 'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-display:  2.125rem; /* 34px — título de pantalla */
  --fs-title:    2rem;     /* 32px — título de sección grande */
  --fs-h2:       1.375rem; /* 22px — nombre de usuario, título de card */
  --fs-h3:       1.125rem; /* 18px — título de card secundaria */
  --fs-body:     0.9375rem;/* 15px — descripciones */
  --fs-sm:       0.8125rem;/* 13px — meta dentro de card */
  --fs-xs:       0.75rem;  /* 12px — micro copy */
  --fs-label:    0.6875rem;/* 11px — labels uppercase, nav */

  --lh-tight:    1.15;
  --lh-normal:   1.45;
  --ls-label:    0.1em;    /* labels y nav en uppercase */
  --ls-display:  -0.02em;  /* títulos grandes cierran un poco */

  /* ── Espaciado ─────────────────────────────────────────────
     Escala de 4. El gutter medido es 20px en Login y 16px en
     Lobby; se adopta 20px como estándar. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  --gutter:        20px;   /* margen lateral de contenido */
  --content-max:   430px;  /* el diseño no crece más allá; se centra */
  --header-h:      60px;
  --nav-h:         76px;

  /* ── Radios ────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:  10px;   /* inputs, botones */
  --r-lg:  14px;   /* cards */
  --r-xl:  20px;   /* contenedores grandes */
  --r-pill: 999px; /* pills, badges, chips de filtro */

  /* ── Elevación ─────────────────────────────────────────────
     Los mockups no usan sombras difusas sobre el fondo: separan
     por superficie y borde. La única sombra real es el glow
     dorado de los elementos activos. */
  --glow-gold: 0 0 0 1px rgba(236, 192, 63, 0.35),
               0 4px 20px rgba(236, 192, 63, 0.10);

  /* ── Alturas de control ────────────────────────────────────── */
  --control-h:     52px;  /* input, select, botón */
  --control-h-sm:  36px;  /* chip de filtro, badge grande */
}