/* ═══════════════════════════════════════════════════════════════
   ASPRO 365 — tokens.css — Sistema de diseño T5 (Tanda 3)
   ═══════════════════════════════════════════════════════════════
   SOLO custom properties: este archivo no pinta nada por sí mismo,
   así que cargarlo antes de styles.css no retematiza ningún módulo.
   El Centro de Mando (Tanda 3) es el primer consumidor; el resto
   de módulos migra en sus tandas (4/6/9…). Guía viva:
   docs/DISENO_SISTEMA.md.

   Los valores salen del inventario real del sistema (2026-07-11):
   estados = paleta Tailwind que ya domina (cobranza_estados.js),
   primario provisional = el azul actual de marca (--blue de
   styles.css), tipografía = Outfit (la fuente cargada hoy) con
   fallback system-ui.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Estados (triada bg / fg / border + color base) ──────── */
  --t5-danger:         #dc2626;
  --t5-danger-fg:      #991b1b;
  --t5-danger-bg:      #fee2e2;
  --t5-danger-border:  #f87171;

  --t5-warning:        #f59e0b;
  --t5-warning-fg:     #92400e;
  --t5-warning-bg:     #fef3c7;
  --t5-warning-border: #fbbf24;

  --t5-success:        #16a34a;
  --t5-success-fg:     #166534;
  --t5-success-bg:     #dcfce7;
  --t5-success-border: #86efac;

  --t5-muted:          #6b7280;
  --t5-muted-fg:       #374151;
  --t5-muted-bg:       #f3f4f6;
  --t5-muted-border:   #d1d5db;

  /* ── Primario (provisional: el azul actual de marca) ─────── */
  --t5-primary:        #2d9cdb;
  --t5-primary-dark:   #1a7ab5;
  --t5-primary-bg:     #e0f4fc;

  /* ── Superficie y texto ──────────────────────────────────── */
  --t5-text:           #1a2a3a;
  --t5-text-muted:     #6b8499;
  --t5-surface:        #ffffff;
  --t5-surface-alt:    #f8fafc;
  --t5-border:         #e2e8f0;

  /* ── Tipografía (escala 11–22) ───────────────────────────── */
  --t5-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t5-fs-11: 11px;   /* metadatos, chips */
  --t5-fs-12: 12px;   /* subtítulos de línea */
  --t5-fs-13: 13px;   /* base del sistema */
  --t5-fs-14: 14px;   /* títulos de línea */
  --t5-fs-16: 16px;   /* headers de tarjeta */
  --t5-fs-18: 18px;   /* títulos de sección */
  --t5-fs-20: 20px;   /* cifras KPI */
  --t5-fs-22: 22px;   /* titular de página */

  /* ── Espaciado (escala 4/8/12/16/24) ─────────────────────── */
  --t5-sp-1: 4px;
  --t5-sp-2: 8px;
  --t5-sp-3: 12px;
  --t5-sp-4: 16px;
  --t5-sp-6: 24px;

  /* ── Radios ──────────────────────────────────────────────── */
  --t5-r-sm:   6px;    /* chips, botones pequeños */
  --t5-r-md:   8px;    /* botones, inputs, badges */
  --t5-r-lg:   12px;   /* tarjetas */
  --t5-r-pill: 999px;  /* pills */

  /* ── Sombras y foco ──────────────────────────────────────── */
  --t5-shadow-card:  0 1px 3px rgba(15, 23, 42, .08);
  --t5-shadow-float: 0 8px 24px rgba(0, 0, 0, .12);
  --t5-focus-ring:   0 0 0 2px rgba(33, 150, 243, .12);

  /* ── Interacción ─────────────────────────────────────────── */
  --t5-tap-min: 40px;  /* alto mínimo de objetivo táctil */
}