{
  "marca": "Kip-Up",
  "lema": "Ideas creativas con ejecución real.",
  "generado": "tokens/build-tokens.mjs (OKLab, ancla en el paso 500)",
  "nucleo": {
    "ink": {
      "hex": "#1A1A2E",
      "rgb": [
        26,
        26,
        46
      ],
      "uso": "Texto principal, logo, fondos oscuros"
    },
    "red": {
      "hex": "#E63946",
      "rgb": [
        230,
        57,
        70
      ],
      "uso": "Color de acción, la flecha, llamadas a la acción"
    },
    "orange": {
      "hex": "#F4A261",
      "rgb": [
        244,
        162,
        97
      ],
      "uso": "Acento secundario, ilustración"
    },
    "cream": {
      "hex": "#F8F5F0",
      "rgb": [
        248,
        245,
        240
      ],
      "uso": "Fondo claro por defecto"
    },
    "white": {
      "hex": "#FFFFFF",
      "rgb": [
        255,
        255,
        255
      ],
      "uso": "Fondos y texto sobre oscuro"
    },
    "ink70": {
      "hex": "#55556A",
      "rgb": [
        85,
        85,
        106
      ],
      "uso": "Texto secundario sobre claro"
    },
    "cream70": {
      "hex": "#B9B6C9",
      "rgb": [
        185,
        182,
        201
      ],
      "uso": "Texto secundario sobre oscuro"
    }
  },
  "escalas": {
    "ink": {
      "50": "#F8F5F0",
      "100": "#E1DFDE",
      "200": "#C2C0C5",
      "300": "#A3A1AB",
      "400": "#7E7D8D",
      "500": "#55556A",
      "600": "#46465B",
      "700": "#39394E",
      "800": "#2D2D42",
      "900": "#222236",
      "950": "#1A1A2E"
    },
    "red": {
      "50": "#FFF5F4",
      "100": "#FFDFDD",
      "200": "#FFC0BD",
      "300": "#FF9D99",
      "400": "#FC6D6E",
      "500": "#E63946",
      "600": "#C80E2E",
      "700": "#A50022",
      "800": "#840019",
      "900": "#630312",
      "950": "#4C060E"
    },
    "orange": {
      "50": "#FFF6EF",
      "100": "#FFEBDD",
      "200": "#FFDCC2",
      "300": "#FFCBA5",
      "400": "#FDB782",
      "500": "#F4A261",
      "600": "#CB7D3A",
      "700": "#A35E1F",
      "800": "#7C4614",
      "900": "#572F09",
      "950": "#3F2005"
    },
    "success": {
      "50": "#EEFBF9",
      "100": "#D8EEEA",
      "200": "#B6DED7",
      "300": "#91CDC3",
      "400": "#63B8AB",
      "500": "#2A9D8F",
      "600": "#008174",
      "700": "#00675C",
      "800": "#005047",
      "900": "#003A33",
      "950": "#002B26"
    },
    "warning": {
      "50": "#FFF6EF",
      "100": "#FFEBDD",
      "200": "#FFDCC2",
      "300": "#FFCBA5",
      "400": "#FDB782",
      "500": "#F4A261",
      "600": "#CB7D3A",
      "700": "#A35E1F",
      "800": "#7C4614",
      "900": "#572F09",
      "950": "#3F2005"
    },
    "danger": {
      "50": "#FFF5F4",
      "100": "#FFDFDD",
      "200": "#FFC0BD",
      "300": "#FF9D99",
      "400": "#FC6D6E",
      "500": "#E63946",
      "600": "#C80E2E",
      "700": "#A50022",
      "800": "#840019",
      "900": "#630312",
      "950": "#4C060E"
    },
    "info": {
      "50": "#F1F9FE",
      "100": "#DBE8F1",
      "200": "#BAD1E1",
      "300": "#98B9D0",
      "400": "#6F9CBA",
      "500": "#457B9D",
      "600": "#2F6586",
      "700": "#20526F",
      "800": "#194057",
      "900": "#132F41",
      "950": "#0F2431"
    }
  },
  "oscuro": {
    "bg": "#12121F",
    "surface": "#1A1A2E",
    "surface2": "#26263D",
    "surface3": "#33334D",
    "line": "#2E2E48",
    "lineStrong": "#454563",
    "lineField": "#7E7D8D",
    "text": "#F8F5F0",
    "textMuted": "#B9B6C9",
    "red": "#FF9D99",
    "orange": "#FFCBA5"
  },
  "semantica": {
    "nota": "Kip-Up no tenía colores de estado definidos. success e info son una PROPUESTA de este kit, no marca establecida: salen de las paletas de las que ya vienen el rojo y el naranja de Kip-Up (#2A9D8F y #457B9D conviven con #E63946 y #F4A261 en las paletas de origen). warning reutiliza el naranja de marca y danger el rojo de marca. Si la marca fija otros, se cambian aquí y en ningún sitio más.",
    "success": {
      "base": "#2A9D8F",
      "texto": "#00675C",
      "fondo": "#EEFBF9",
      "origen": "propuesta"
    },
    "warning": {
      "base": "#F4A261",
      "texto": "#7C4614",
      "fondo": "#FFF6EF",
      "origen": "naranja de marca"
    },
    "danger": {
      "base": "#E63946",
      "texto": "#A50022",
      "fondo": "#FFF5F4",
      "origen": "rojo de marca"
    },
    "info": {
      "base": "#457B9D",
      "texto": "#20526F",
      "fondo": "#F1F9FE",
      "origen": "propuesta"
    }
  },
  "dataviz": [
    "#E63946",
    "#2F6586",
    "#F4A261",
    "#2A9D8F",
    "#46465B",
    "#FF9D99",
    "#98B9D0",
    "#7E7D8D"
  ],
  "contraste": {
    "norma": "WCAG 2.1 · texto normal AA 4,5:1 · texto grande AA 3:1 (>=24px, o >=18.66px en negrita) · AAA 7:1 · elementos no textuales 3:1",
    "calculado_con": "Luminancia relativa WCAG sobre sRGB. Los ratios son exactos, no estimados.",
    "avisos": [
      {
        "problema": "El rojo de marca #E63946 como TEXTO no llega a AA: 3.83:1 sobre crema y 4.17:1 sobre blanco.",
        "donde": "Enlaces, titulares pequeños, texto de error.",
        "solucion": "Texto normal en rojo: red-700 #A50022 (7.36:1 sobre crema, 8.01:1 sobre blanco). El rojo de marca se reserva para texto grande (>=24px, o >=18.66px en negrita) y para rellenos."
      },
      {
        "problema": "Botón rojo de marca con etiqueta blanca: 4.17:1. Con etiqueta navy: 4.09:1. Ninguna llega a 4,5:1.",
        "donde": "El botón principal, que es la pieza más repetida del producto.",
        "solucion": "Dos salidas, las dos válidas: (a) etiqueta grande — 18.66px en negrita o más — y el relleno sigue siendo #E63946; (b) relleno red-600 #C80E2E con etiqueta blanca (5.9:1), que es el mismo rojo un escalón más oscuro. En web de marca, donde el botón es grande, vale (a); en producto, con etiquetas de 15px, usa (b) — token --kipup-red-aa."
      },
      {
        "problema": "El naranja #F4A261 como texto sobre crema es 1.9:1, y en blanco encima da 2.06:1.",
        "donde": "Avisos, insignias, cifras destacadas.",
        "solucion": "El naranja es relleno, no tinta. Texto en naranja: orange-700 #A35E1F (4.62:1) u orange-800 #7C4614 (7.04:1). Sobre relleno naranja, la etiqueta va en navy (8.27:1)."
      },
      {
        "problema": "Sobre el navy de marca, el rojo de marca se queda en 4.09:1.",
        "donde": "Modo oscuro: enlaces, iconos de acción, texto de error.",
        "solucion": "red-300 #FF9D99 (8.56:1 sobre el navy). Es el token --kipup-link del tema oscuro."
      }
    ],
    "parejas": [
      {
        "pareja": "ink sobre cream",
        "texto": "#1A1A2E",
        "fondo": "#F8F5F0",
        "ratio": 15.69,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto principal en pantalla clara"
      },
      {
        "pareja": "ink sobre white",
        "texto": "#1A1A2E",
        "fondo": "#FFFFFF",
        "ratio": 17.06,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto principal sobre tarjeta"
      },
      {
        "pareja": "ink70 sobre cream",
        "texto": "#55556A",
        "fondo": "#F8F5F0",
        "ratio": 6.67,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Texto secundario en pantalla clara"
      },
      {
        "pareja": "ink70 sobre white",
        "texto": "#55556A",
        "fondo": "#FFFFFF",
        "ratio": 7.26,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto secundario sobre tarjeta"
      },
      {
        "pareja": "red sobre cream",
        "texto": "#E63946",
        "fondo": "#F8F5F0",
        "ratio": 3.83,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Rojo de marca como texto (NO usar en cuerpo)"
      },
      {
        "pareja": "red sobre white",
        "texto": "#E63946",
        "fondo": "#FFFFFF",
        "ratio": 4.17,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Rojo de marca como texto (NO usar en cuerpo)"
      },
      {
        "pareja": "red-600 sobre cream",
        "texto": "#C80E2E",
        "fondo": "#F8F5F0",
        "ratio": 5.43,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Alternativa: enlace o texto en rojo"
      },
      {
        "pareja": "red-700 sobre cream",
        "texto": "#A50022",
        "fondo": "#F8F5F0",
        "ratio": 7.36,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Alternativa: enlace o texto en rojo"
      },
      {
        "pareja": "red-700 sobre white",
        "texto": "#A50022",
        "fondo": "#FFFFFF",
        "ratio": 8.01,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Alternativa: enlace o texto en rojo"
      },
      {
        "pareja": "orange sobre cream",
        "texto": "#F4A261",
        "fondo": "#F8F5F0",
        "ratio": 1.9,
        "veredicto": "insuficiente — no usar como texto",
        "uso": "Naranja de marca como texto (NO usar)"
      },
      {
        "pareja": "orange-700 sobre cream",
        "texto": "#A35E1F",
        "fondo": "#F8F5F0",
        "ratio": 4.62,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Alternativa: texto en naranja"
      },
      {
        "pareja": "orange-800 sobre cream",
        "texto": "#7C4614",
        "fondo": "#F8F5F0",
        "ratio": 7.04,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Alternativa: texto en naranja"
      },
      {
        "pareja": "white sobre red",
        "texto": "#FFFFFF",
        "fondo": "#E63946",
        "ratio": 4.17,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Botón principal con el rojo de marca"
      },
      {
        "pareja": "ink sobre red",
        "texto": "#1A1A2E",
        "fondo": "#E63946",
        "ratio": 4.09,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Botón rojo con etiqueta oscura"
      },
      {
        "pareja": "white sobre red-600",
        "texto": "#FFFFFF",
        "fondo": "#C80E2E",
        "ratio": 5.9,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Botón principal accesible / hover"
      },
      {
        "pareja": "white sobre red-700",
        "texto": "#FFFFFF",
        "fondo": "#A50022",
        "ratio": 8.01,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Botón principal presionado"
      },
      {
        "pareja": "cream sobre ink",
        "texto": "#F8F5F0",
        "fondo": "#1A1A2E",
        "ratio": 15.69,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Botón oscuro / cabecera"
      },
      {
        "pareja": "white sobre ink",
        "texto": "#FFFFFF",
        "fondo": "#1A1A2E",
        "ratio": 17.06,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Botón oscuro / cabecera"
      },
      {
        "pareja": "ink sobre orange",
        "texto": "#1A1A2E",
        "fondo": "#F4A261",
        "ratio": 8.27,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Aviso o insignia con relleno naranja"
      },
      {
        "pareja": "white sobre orange",
        "texto": "#FFFFFF",
        "fondo": "#F4A261",
        "ratio": 2.06,
        "veredicto": "insuficiente — no usar como texto",
        "uso": "Texto claro sobre naranja"
      },
      {
        "pareja": "ink-500 sobre surface-2",
        "texto": "#55556A",
        "fondo": "#F8F5F0",
        "ratio": 6.67,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Texto secundario sobre la superficie gris"
      },
      {
        "pareja": "ink-700 sobre ink-100",
        "texto": "#39394E",
        "fondo": "#E1DFDE",
        "ratio": 8.46,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia neutra"
      },
      {
        "pareja": "success-700 sobre success-50",
        "texto": "#00675C",
        "fondo": "#EEFBF9",
        "ratio": 6.4,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Insignia de éxito"
      },
      {
        "pareja": "warning-800 sobre warning-50",
        "texto": "#7C4614",
        "fondo": "#FFF6EF",
        "ratio": 7.17,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia de aviso"
      },
      {
        "pareja": "danger-700 sobre danger-50",
        "texto": "#A50022",
        "fondo": "#FFF5F4",
        "ratio": 7.48,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia de error"
      },
      {
        "pareja": "info-700 sobre info-50",
        "texto": "#20526F",
        "fondo": "#F1F9FE",
        "ratio": 7.9,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia informativa"
      },
      {
        "pareja": "success-700 sobre cream",
        "texto": "#00675C",
        "fondo": "#F8F5F0",
        "ratio": 6.24,
        "veredicto": "AA — cualquier tamaño",
        "uso": "Texto de éxito sin relleno"
      },
      {
        "pareja": "info-700 sobre cream",
        "texto": "#20526F",
        "fondo": "#F8F5F0",
        "ratio": 7.73,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto informativo sin relleno"
      },
      {
        "pareja": "cream sobre ink (superficie)",
        "texto": "#F8F5F0",
        "fondo": "#1A1A2E",
        "ratio": 15.69,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto principal en oscuro"
      },
      {
        "pareja": "cream sobre bg oscuro",
        "texto": "#F8F5F0",
        "fondo": "#12121F",
        "ratio": 17.06,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto principal sobre el fondo"
      },
      {
        "pareja": "cream70 sobre ink (superficie)",
        "texto": "#B9B6C9",
        "fondo": "#1A1A2E",
        "ratio": 8.61,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto secundario en oscuro"
      },
      {
        "pareja": "cream70 sobre bg oscuro",
        "texto": "#B9B6C9",
        "fondo": "#12121F",
        "ratio": 9.36,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto secundario sobre el fondo"
      },
      {
        "pareja": "red sobre ink (superficie)",
        "texto": "#E63946",
        "fondo": "#1A1A2E",
        "ratio": 4.09,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Rojo de marca como texto en oscuro"
      },
      {
        "pareja": "red-300 sobre ink (superficie)",
        "texto": "#FF9D99",
        "fondo": "#1A1A2E",
        "ratio": 8.56,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Alternativa: rojo de texto en oscuro"
      },
      {
        "pareja": "red-300 sobre bg oscuro",
        "texto": "#FF9D99",
        "fondo": "#12121F",
        "ratio": 9.31,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Alternativa: rojo de texto en oscuro"
      },
      {
        "pareja": "orange sobre ink (superficie)",
        "texto": "#F4A261",
        "fondo": "#1A1A2E",
        "ratio": 8.27,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Naranja como texto en oscuro"
      },
      {
        "pareja": "white sobre red (oscuro)",
        "texto": "#FFFFFF",
        "fondo": "#E63946",
        "ratio": 4.17,
        "veredicto": "AA solo texto grande (>=24px, o >=18.66px en negrita) y bordes/iconos",
        "uso": "Botón principal en modo oscuro"
      },
      {
        "pareja": "cream70 sobre surface-2 oscuro",
        "texto": "#B9B6C9",
        "fondo": "#26263D",
        "ratio": 7.43,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Texto secundario sobre tarjeta elevada"
      },
      {
        "pareja": "success-300 sobre ink",
        "texto": "#91CDC3",
        "fondo": "#1A1A2E",
        "ratio": 9.52,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia de éxito en oscuro"
      },
      {
        "pareja": "warning-300 sobre ink",
        "texto": "#FFCBA5",
        "fondo": "#1A1A2E",
        "ratio": 11.65,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia de aviso en oscuro"
      },
      {
        "pareja": "danger-300 sobre ink",
        "texto": "#FF9D99",
        "fondo": "#1A1A2E",
        "ratio": 8.56,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia de error en oscuro"
      },
      {
        "pareja": "info-300 sobre ink",
        "texto": "#98B9D0",
        "fondo": "#1A1A2E",
        "ratio": 8.27,
        "veredicto": "AAA — cualquier tamaño",
        "uso": "Insignia informativa en oscuro"
      }
    ],
    "no_textual": [
      {
        "pareja": "línea sobre surface",
        "elemento": "#C2C0C5",
        "fondo": "#FFFFFF",
        "ratio": 1.8,
        "veredicto": "decorativo — WCAG no exige 3:1 aquí",
        "uso": "Borde de tarjeta y de tabla — decorativo, no le aplica el 3:1"
      },
      {
        "pareja": "línea fuerte sobre surface",
        "elemento": "#A3A1AB",
        "fondo": "#FFFFFF",
        "ratio": 2.55,
        "veredicto": "decorativo — WCAG no exige 3:1 aquí",
        "uso": "Separador marcado — decorativo, no le aplica el 3:1"
      },
      {
        "pareja": "línea de campo sobre surface",
        "elemento": "#7E7D8D",
        "fondo": "#FFFFFF",
        "ratio": 4.03,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Borde de campo de formulario — le aplica el 3:1"
      },
      {
        "pareja": "línea de campo sobre cream",
        "elemento": "#7E7D8D",
        "fondo": "#F8F5F0",
        "ratio": 3.71,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Borde de campo sobre el fondo de la página"
      },
      {
        "pareja": "foco (red) sobre cream",
        "elemento": "#E63946",
        "fondo": "#F8F5F0",
        "ratio": 3.83,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Aro de foco en modo claro"
      },
      {
        "pareja": "foco (red) sobre white",
        "elemento": "#E63946",
        "fondo": "#FFFFFF",
        "ratio": 4.17,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Aro de foco sobre tarjeta"
      },
      {
        "pareja": "línea oscura sobre surface oscura",
        "elemento": "#454563",
        "fondo": "#1A1A2E",
        "ratio": 1.86,
        "veredicto": "decorativo — WCAG no exige 3:1 aquí",
        "uso": "Separador en oscuro — decorativo"
      },
      {
        "pareja": "línea de campo oscura sobre ink",
        "elemento": "#7E7D8D",
        "fondo": "#1A1A2E",
        "ratio": 4.23,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Borde de campo en modo oscuro — le aplica el 3:1"
      },
      {
        "pareja": "foco (red-400) sobre ink",
        "elemento": "#FC6D6E",
        "fondo": "#1A1A2E",
        "ratio": 6.13,
        "veredicto": "AA no textual (>=3:1)",
        "uso": "Aro de foco en modo oscuro"
      }
    ]
  }
}