/*
 * TimeBit Design System — Tokens
 * Paleta: Antracita + Índigo
 * Fondo: #f0f2f5
 * Versión: 1.0 · 2026-03-14
 *
 * CÓMO USAR:
 *   En cualquier CSS de la app: var(--tb-primary), var(--tb-bg-app), etc.
 *   Todos los CSS específicos de pantalla deben usar estos tokens
 *   en lugar de valores hexadecimales directos.
 */

:root {

  /* ── Colores de marca ── */
  --tb-dark:        #1f2937;   /* antracita oscuro — cabeceras, navs */
  --tb-dark-mid:    #374151;   /* antracita medio — hover de cabeceras */
  --tb-dark-light:  #4b5563;   /* antracita claro — textos sobre blanco */

  --tb-primary:     #6366f1;   /* índigo — botón principal, enlaces activos */
  --tb-primary-mid: #818cf8;   /* índigo medio — hover, highlights */
  --tb-primary-bg:  #e0e7ff;   /* índigo muy claro — fondos de badge, chips */

  /* ── Semáforo de estados ── */
  --tb-success:     #059669;   /* verde éxito — Aprobar, Activo, Entrada */
  --tb-success-bg:  #d1fae5;
  --tb-success-txt: #065f46;

  --tb-warning:     #d97706;   /* ámbar — Pendiente, Revisar, Alerta */
  --tb-warning-bg:  #fef3c7;
  --tb-warning-txt: #92400e;

  --tb-danger:      #e11d48;   /* rojo — Eliminar, Rechazar, Error */
  --tb-danger-bg:   #ffe4e6;
  --tb-danger-txt:  #9f1239;

  --tb-neutral:     #6b7280;   /* gris — Volver, Cancelar, inactivo */
  --tb-neutral-bg:  #f3f4f6;
  --tb-neutral-txt: #374151;

  --tb-info:        #0891b2;   /* cian — Info, detalles secundarios */
  --tb-info-bg:     #cffafe;
  --tb-info-txt:    #164e63;

  /* ── Fondos ── */
  --tb-bg-app:      #f0f2f5;   /* fondo de página en toda la app */
  --tb-bg-card:     #ffffff;   /* fondo de tarjeta / panel */
  --tb-bg-sidebar:  #1f2937;   /* sidebar / menú lateral */

  /* ── Tipografía ── */
  --tb-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --tb-text-primary:   #111827;  /* títulos, texto principal */
  --tb-text-secondary: #6b7280;  /* subtítulos, ayudas, fechas */
  --tb-text-muted:     #9ca3af;  /* texto deshabilitado, placeholder */
  --tb-text-on-dark:   #ffffff;  /* texto sobre fondos oscuros */

  --tb-font-xl:    1.75rem;   /* título de página */
  --tb-font-lg:    1.25rem;   /* subtítulo de sección */
  --tb-font-md:    1rem;      /* texto estándar */
  --tb-font-sm:    0.875rem;  /* texto secundario */
  --tb-font-xs:    0.75rem;   /* etiquetas, badges, breadcrumb */

  --tb-weight-normal:  400;
  --tb-weight-medium:  600;
  --tb-weight-bold:    700;
  --tb-weight-black:   800;

  /* ── Espaciado ── */
  --tb-space-xs:   4px;
  --tb-space-sm:   8px;
  --tb-space-md:   16px;
  --tb-space-lg:   24px;
  --tb-space-xl:   32px;
  --tb-space-xxl:  48px;

  /* ── Bordes y sombras ── */
  --tb-radius-sm:   6px;
  --tb-radius-md:   10px;
  --tb-radius-lg:   14px;
  --tb-radius-pill: 9999px;

  --tb-shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --tb-shadow-md:   0 2px 12px rgba(0,0,0,.08);
  --tb-shadow-lg:   0 4px 24px rgba(0,0,0,.12);
  --tb-shadow-card: 0 2px 12px rgba(0,0,0,.07);

  --tb-border-color: #e5e7eb;
  --tb-border:       1px solid #e5e7eb;

  /* ── Transiciones ── */
  --tb-transition: all .18s ease;
}