{
  "$schema": "pasaje360-brand-tokens-v1",
  "meta": {
    "brand": "Pasaje360",
    "domain": "pasaje360.com",
    "updated": "2026-07-10",
    "notes": "Fuente única de verdad para colores, tipografía y espaciado de marca. Usar estos valores exactos en landing page, artes publicitarias y cualquier superficie de marketing. No inventar tonos derivados fuera de esta paleta."
  },
  "color": {
    "primary": {
      "900": { "value": "#16305C", "usage": "Azul profundo oscuro - hover de botones, fondos oscuros, footer" },
      "700": { "value": "#1B3A6B", "usage": "Azul principal de marca - logo, encabezados, botones primarios, links" },
      "100": { "value": "#E8EBF0", "usage": "Tinte muy claro de azul - fondos de sección alternos, cards sutiles" },
      "050": { "value": "#F4F5F8", "usage": "Tinte casi imperceptible - fondos de página con toque de marca" }
    },
    "accent": {
      "600": { "value": "#FF7A33", "usage": "Naranja/ámbar principal - ícono del logo, acentos, badges, subrayados, iconografía. NO usar como color de texto ni como fondo sólido de botón con texto encima (contraste insuficiente, ver 'accessibility')" },
      "400": { "value": "#F2994A", "usage": "Ámbar cálido claro - extremo claro de degradados decorativos, estados hover de elementos accent" },
      "050": { "value": "#FFF4EF", "usage": "Tinte muy claro de acento - fondos de badges/alertas informales" }
    },
    "neutral": {
      "white": { "value": "#FFFFFF", "usage": "Fondo base, texto sobre fondos oscuros" },
      "bg": { "value": "#F5F7FA", "usage": "Fondo neutro claro de página" },
      "border": { "value": "#E2E6EC", "usage": "Bordes, separadores, líneas de tablas" },
      "text-secondary": { "value": "#6B7385", "usage": "Texto secundario, labels, metadata (contraste 4.76:1 sobre blanco)" },
      "text": { "value": "#14171C", "usage": "Texto principal, casi negro (contraste 17.96:1 sobre blanco)" }
    },
    "feedback": {
      "success": { "value": "#1E8E5A", "usage": "Confirmaciones de reserva, pago exitoso" },
      "warning": { "value": "#C77A16", "usage": "Alertas de disponibilidad, avisos" },
      "error": { "value": "#C43D3D", "usage": "Errores de pago/formulario" }
    }
  },
  "accessibility": {
    "wcag_contrast_checked": true,
    "pairs": [
      { "fg": "#1B3A6B", "bg": "#FFFFFF", "ratio": "11.27:1", "result": "AAA - texto normal y grande" },
      { "fg": "#FFFFFF", "bg": "#1B3A6B", "ratio": "11.27:1", "result": "AAA - texto sobre botón/fondo primario" },
      { "fg": "#14171C", "bg": "#FFFFFF", "ratio": "17.96:1", "result": "AAA" },
      { "fg": "#14171C", "bg": "#F5F7FA", "ratio": "16.74:1", "result": "AAA" },
      { "fg": "#6B7385", "bg": "#FFFFFF", "ratio": "4.76:1", "result": "AA - texto normal" },
      { "fg": "#1B3A6B", "bg": "#FF7A33", "ratio": "4.34:1", "result": "AA solo texto grande/negrita (>=18.66px bold); no usar para texto de párrafo" },
      { "fg": "#FFFFFF", "bg": "#FF7A33", "ratio": "2.60:1", "result": "FALLA AA - nunca poner texto blanco sobre naranja solido" }
    ],
    "rule": "El naranja/ámbar (#FF7A33, #F2994A) se reserva para íconos, ilustraciones, bordes, subrayados y elementos decorativos grandes. Para botones con relleno naranja, el texto debe ir en azul marino (#1B3A6B) o casi-negro (#14171C), nunca en blanco. Para CTAs con texto blanco, usar fondo azul marino (#1B3A6B)."
  },
  "typography": {
    "fontFamily": {
      "display": "'Poppins', 'Segoe UI', -apple-system, sans-serif",
      "body": "'Inter', 'Segoe UI', -apple-system, sans-serif"
    },
    "fontWeight": {
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "fontSize": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "22px",
      "2xl": "28px",
      "3xl": "36px",
      "4xl": "48px",
      "5xl": "64px"
    },
    "lineHeight": {
      "tight": 1.15,
      "heading": 1.25,
      "body": 1.6
    },
    "usage": {
      "h1": "font-family: display, weight: bold(700), size: 4xl-5xl",
      "h2": "font-family: display, weight: semibold(600), size: 3xl",
      "h3": "font-family: display, weight: semibold(600), size: 2xl",
      "body": "font-family: body, weight: regular(400), size: base",
      "button": "font-family: body, weight: semibold(600), size: base"
    }
  },
  "spacing": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "24px",
    "6": "32px",
    "7": "48px",
    "8": "64px",
    "9": "96px",
    "10": "128px"
  },
  "radius": {
    "sm": "6px",
    "md": "10px",
    "lg": "16px",
    "full": "999px"
  },
  "shadow": {
    "sm": "0 1px 2px rgba(20, 23, 28, 0.06)",
    "md": "0 4px 12px rgba(20, 23, 28, 0.08)",
    "lg": "0 12px 32px rgba(27, 58, 107, 0.14)"
  }
}