/*
 * Pasaje360 — Design Tokens
 * Fuente única de verdad para colores, tipografía y espaciado.
 * Generado a partir de tokens.json — mantener ambos archivos sincronizados.
 */

:root {
  /* ---- Color / Primary (azul "carretera al atardecer") ---- */
  --p360-primary-900: #16305C; /* hover, fondos oscuros, footer */
  --p360-primary-700: #1B3A6B; /* azul principal: logo, headings, botones primarios */
  --p360-primary-100: #E8EBF0; /* tinte claro: fondos alternos, cards sutiles */
  --p360-primary-050: #F4F5F8; /* tinte casi imperceptible */

  /* ---- Color / Accent (naranja/ámbar cálido) ---- */
  --p360-accent-600: #FF7A33; /* icono del logo, acentos, badges, subrayados */
  --p360-accent-400: #F2994A; /* extremo claro de degradados, hover de accent */
  --p360-accent-050: #FFF4EF; /* fondo de badges/alertas suaves */

  /* ---- Color / Neutrales ---- */
  --p360-white: #FFFFFF;
  --p360-bg: #F5F7FA;
  --p360-border: #E2E6EC;
  --p360-text-secondary: #6B7385; /* 4.76:1 sobre blanco */
  --p360-text: #14171C;           /* 17.96:1 sobre blanco */

  /* ---- Color / Feedback ---- */
  --p360-success: #1E8E5A;
  --p360-warning: #C77A16;
  --p360-error: #C43D3D;

  /* ---- Tipografia ---- */
  --p360-font-display: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
  --p360-font-body: 'Inter', 'Segoe UI', -apple-system, sans-serif;

  --p360-weight-regular: 400;
  --p360-weight-medium: 500;
  --p360-weight-semibold: 600;
  --p360-weight-bold: 700;

  --p360-text-xs: 12px;
  --p360-text-sm: 14px;
  --p360-text-base: 16px;
  --p360-text-lg: 18px;
  --p360-text-xl: 22px;
  --p360-text-2xl: 28px;
  --p360-text-3xl: 36px;
  --p360-text-4xl: 48px;
  --p360-text-5xl: 64px;

  --p360-leading-tight: 1.15;
  --p360-leading-heading: 1.25;
  --p360-leading-body: 1.6;

  /* ---- Espaciado (base 4px) ---- */
  --p360-space-1: 4px;
  --p360-space-2: 8px;
  --p360-space-3: 12px;
  --p360-space-4: 16px;
  --p360-space-5: 24px;
  --p360-space-6: 32px;
  --p360-space-7: 48px;
  --p360-space-8: 64px;
  --p360-space-9: 96px;
  --p360-space-10: 128px;

  /* ---- Radios ---- */
  --p360-radius-sm: 6px;
  --p360-radius-md: 10px;
  --p360-radius-lg: 16px;
  --p360-radius-full: 999px;

  /* ---- Sombras ---- */
  --p360-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
  --p360-shadow-md: 0 4px 12px rgba(20, 23, 28, 0.08);
  --p360-shadow-lg: 0 12px 32px rgba(27, 58, 107, 0.14);
}

/*
 * REGLA DE ACCESIBILIDAD — leer antes de usar el naranja como fondo:
 * --p360-accent-600 (#FF7A33) sobre blanco da solo 2.60:1 de contraste con texto blanco (falla AA).
 * Botones con relleno naranja deben llevar texto en --p360-primary-700 o --p360-text, nunca blanco.
 * Para CTAs con texto blanco, usar fondo --p360-primary-700.
 */