/* ─────────────────────────────────────────────────────────────
   Design Tokens · MapVX Soporte
   Paleta derivada del design system Watch & Guardian.
   Fuente: screenshots, mockup y design-reference.html.
───────────────────────────────────────────────────────────── */
:root {
  /* Tipografía */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Fondos */
  --color-bg-page:    #F9FAFB;
  --color-bg-surface: #FFFFFF;
  --color-bg-raised:  #F3F4F6;
  --color-bg-subtle:  #E9EAEC;

  /* Fondos de estado */
  --color-bg-info:    #EFF6FF;
  --color-bg-success: #F0FDF4;
  --color-bg-warning: #FFFBEB;
  --color-bg-error:   #FEF2F2;

  /* Bordes */
  --color-border-default: #E5E7EB;
  --color-border-strong:  #D1D5DB;
  --color-border-focus:   #2563EB;
  --color-border-error:   #EF4444;
  --color-border-success: #10B981;
  --color-border-info:    #93C5FD;

  /* Texto */
  --color-text-primary:   #111827;
  --color-text-secondary: #6B7280;
  --color-text-tertiary:  #9CA3AF;
  --color-text-disabled:  #D1D5DB;
  --color-text-error:     #DC2626;
  --color-text-success:   #059669;
  --color-text-warning:   #D97706;
  --color-text-info:      #2563EB;

  /* Brand / Primary (azul MapVX) */
  --color-primary:        #2563EB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-tint:   #EFF6FF;
  --color-primary-border: #BFDBFE;
  --color-primary-text:   #FFFFFF;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.15);

  /* Espaciado */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Tamaños de texto */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;

  /* Alturas de línea */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Transiciones */
  --t-fast:   150ms ease-out;
  --t-base:   200ms ease-out;
  --t-slow:   300ms ease-out;
  --t-appear: 350ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Touch target mínimo */
  --touch-min: 44px;
}