/* ==========================================================================
   Tigre Social · tokens.css
   Copiar a: shared/css/tokens.css  →  incluir PRIMERO en todos los módulos:
   <link rel="stylesheet" href="/shared/css/tokens.css">
   <link rel="stylesheet" href="/shared/css/ui.css">

   Un solo :root para todo el sitio. Ningún módulo redefine estas variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..700&family=DM+Mono:wght@400;500&family=Archivo:wght@600;700&display=swap');

:root {
  /* --- Marca ------------------------------------------------------------ */
  --brand:            #E2001A;  /* rojo del logo: acción primaria, acentos  */
  --brand-dark:       #8C0011;  /* hover de primario, texto sobre rosa      */
  --brand-soft:       #FCE8EA;  /* fondos de chip/avatar rojos              */
  --brand-border:     #F5D3D7;

  --accent:           #00A5DF;  /* cian del logo: segunda serie de datos    */
  --accent-dark:      #00688C;
  --accent-soft:      #E4F5FB;

  /* --- Texto ------------------------------------------------------------ */
  --ink:              #24211E;  /* texto principal                          */
  --ink-2:            #3D3A37;  /* etiquetas de formulario                  */
  --ink-3:            #5A554F;  /* celdas secundarias de tabla              */
  --ink-4:            #7A736C;  /* descripciones                            */
  --ink-mute:         #A29B94;  /* placeholder, datos vacíos                */

  /* --- Superficies ------------------------------------------------------ */
  --page:             #F6F4F2;  /* fondo de página                          */
  --surface:          #FFFFFF;  /* tarjetas, tablas, header                 */
  --surface-2:        #FBFAF9;  /* hover de fila, thead, pie de tabla       */
  --surface-3:        #F1EDE9;  /* chip neutro, riel de barra de progreso   */

  --line:             #EAE6E2;  /* borde de tarjeta                         */
  --line-strong:      #E4DFDA;  /* borde de input y botón secundario        */
  --line-soft:        #F5F1ED;  /* separador entre filas                    */

  /* --- Estado ----------------------------------------------------------- */
  --ok:               #0B8A5B;  --ok-soft:    #E6F5EE;
  --warn:             #B45309;  --warn-soft:  #FDF3E4;
  --danger:           #E2001A;  --danger-soft:#FCE8EA;
  --info:             #00688C;  --info-soft:  #E4F5FB;

  /* --- Series de gráficos (usar en este orden) -------------------------- */
  --chart-1: #E2001A;  --chart-2: #8C0011;  --chart-3: #B45309;
  --chart-4: #0B8A5B;  --chart-5: #00A5DF;  --chart-6: #00688C;
  --chart-7: #C9B99A;  --chart-grid: #F5F1ED;  --chart-empty: #E4DFDA;

  /* --- Tipografía ------------------------------------------------------- */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Archivo', 'DM Sans', sans-serif;   /* títulos y números  */
  --font-mono:    'DM Mono', ui-monospace, monospace; /* fechas, IDs, datos */

  --fs-eyebrow: 11px;   /* mono, mayúsculas, tracking .14em                 */
  --fs-label:   12.5px;
  --fs-meta:    13px;
  --fs-body:    14.5px;
  --fs-cell:    13.5px;
  --fs-lead:    15px;
  --fs-h2:      19px;
  --fs-h1:      26px;   /* nunca más grande en pantallas internas          */
  --fs-kpi:     26px;

  /* --- Espaciado y forma ------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px;

  --r-sm: 8px;   /* botones, inputs, botón de ícono                         */
  --r-md: 10px;  /* tarjeta KPI, input grande                               */
  --r-lg: 12px;  /* tarjeta / tabla / panel                                 */
  --r-pill: 20px;

  --row-h:   44px;  /* alto mínimo de fila de tabla                         */
  --touch:   44px;  /* mínimo táctil en mobile                             */
  --header-h:56px;

  --shadow-sm: 0 1px 2px rgba(36, 33, 30, .04);
  --shadow-md: 0 1px 3px rgba(36, 33, 30, .05);

  --focus-ring: 0 0 0 3px rgba(226, 0, 26, .12);
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* Menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}