/* ============================================================
   smgr · tokens.css — design tokens del rediseño "Foco" (E2)
   SOLO custom properties. Los componentes viven en rincon.css.
   Fuente de verdad: prototipos/direccion-e2.html (skin clara).
   ============================================================ */

:root {
  /* ---------- Paleta clara (base del sitio) ---------- */
  --ground: #F8F7F3;        /* fondo general, papel cálido */
  --surface: #FFFFFF;       /* tarjetas */
  --ink: #131C2E;           /* azul noche — texto y CTA principal */
  --muted: #5B6577;         /* texto secundario */
  --line: #E3E1D8;          /* hairlines cálidos */
  --zebra: #F3F2EC;         /* filas pares de tablas/listas */
  --hover: #EFF2F6;         /* hover de filas */

  /* ---------- Paleta oscura (solo superficies de foco:
       drawer y banda de registro) ---------- */
  --court-a: #131C2E;
  --court-b: #1A2740;
  --court: linear-gradient(160deg, var(--court-a) 0%, var(--court-b) 100%);
  --muted-dark: #98A3B8;               /* texto secundario sobre --court */
  --line-dark: rgba(255,255,255,.12);  /* hairlines sobre --court */

  /* ---------- Acento y semánticos ---------- */
  --accent: #F0A23C;                    /* ámbar de foco */
  --accent-soft: rgba(240,162,60,.16);
  --accent-deep: #C07C1D;               /* ámbar profundo: números protagonistas sobre blanco */
  --up: #12805C;                        /* variaciones positivas (fondo claro) */
  --down: #C03A2E;                      /* variaciones negativas (fondo claro) */
  --up-dark: #4AD6A0;                   /* legibles sobre --court */
  --down-dark: #F08578;
  --up-tint: #E7F3EE;                   /* fondos de chips ▲/▼ */
  --down-tint: #F9EAE7;

  /* ---------- Posiciones (badges globales; hues bien separados, AA) ---------- */
  --pos-b: #2563EB;                     /* Base — azul */
  --pos-a: #7C3AED;                     /* Alero — violeta */
  --pos-p: #059669;                     /* Pívot — verde */
  --pos-b-tint: rgba(37, 99, 235, .12);
  --pos-a-tint: rgba(124, 58, 237, .12);
  --pos-p-tint: rgba(5, 150, 105, .12);

  /* ---------- Tipografía ---------- */
  --sans: 'Barlow', system-ui, sans-serif;                              /* cuerpo */
  --score: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;    /* titulares y números grandes */

  /* ---------- Espaciado ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* ---------- Radios y sombras ---------- */
  --r-focus: 16px;          /* superficies protagonistas */
  --r-card: 16px;           /* tarjetas */
  --r-input: 12px;          /* inputs */
  --r-pill: 999px;          /* pastillas y botones */
  --shadow-card: 0 1px 3px rgba(19,28,46,.07);
  --shadow-pop: 0 16px 48px rgba(19,28,46,.22);
  --glow: 0 0 0 2px rgba(240,162,60,.55), 0 0 24px rgba(240,162,60,.35);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --header-h: 64px;         /* rincon.css lo sube a 108px en móvil (<=740px) */
  --subnav-h: 48px;         /* sub-nav de anclas de la ficha */
}