/* KBL — tokens v1.0.0 · 2026-09-06 FUENTE DE VERDAD del sistema visual. Generado por assets/logo/gen-identidad.js a partir de tokens/paleta.json (contrastes medidos, criterio C-01). No editar a mano: corregir paleta.js y regenerar. Temas: «papel» (claro, por defecto; el producto se usa de día) y «carbón» (oscuro; marca y presentaciones). Activación: data-tema="papel" | data-tema="carbon" en . Sin atributo, sigue al sistema. */ :root { /* — color · tema papel — */ --kbl-fondo: #F2F1ED; --kbl-superficie: #FAF9F6; --kbl-superficie-2: #EAE9E4; --kbl-linea: #D8D6CF; --kbl-linea-fuerte: #88867E; --kbl-tinta: #1B1D21; --kbl-texto-2: #5C5C61; --kbl-texto-3: #66676C; --kbl-desactivado: #B3B2AB; --kbl-ok: #487048; --kbl-alerta: #826223; --kbl-error: #964C40; --kbl-info: #456A87; --kbl-interactivo: #1B1D21; --kbl-foco: #1B1D21; /* — materia (constantes, no cambian con el tema) — */ --kbl-papel: #F2F1ED; --kbl-carbon: #15171A; /* — tipografía — */ --kbl-fuente: "Archivo", "Helvetica Neue", Arial, sans-serif; --kbl-peso-texto: 400; --kbl-peso-medio: 500; --kbl-peso-titular: 600; --kbl-ancho-texto: 100%; --kbl-ancho-etiqueta: 125%; --kbl-tracking-titular: -0.01em; --kbl-tracking-etiqueta: 0.14em; --kbl-t-12: 12px; --kbl-lh-12: 16px; --kbl-t-14: 14px; --kbl-lh-14: 20px; --kbl-t-16: 16px; --kbl-lh-16: 24px; --kbl-t-18: 18px; --kbl-lh-18: 26px; --kbl-t-20: 20px; --kbl-lh-20: 28px; --kbl-t-24: 24px; --kbl-lh-24: 30px; --kbl-t-32: 32px; --kbl-lh-32: 38px; --kbl-t-44: 44px; --kbl-lh-44: 50px; --kbl-t-60: 60px; --kbl-lh-60: 64px; /* — espacio (base 4) — */ --kbl-e-1: 4px; --kbl-e-2: 8px; --kbl-e-3: 12px; --kbl-e-4: 16px; --kbl-e-5: 24px; --kbl-e-6: 32px; --kbl-e-7: 48px; --kbl-e-8: 64px; --kbl-e-9: 96px; /* — forma — */ --kbl-radio: 0px; --kbl-borde: 1px; /* — motion — */ --kbl-dur-corte: 200ms; --kbl-dur-paso: 400ms; --kbl-dur-bloque: 800ms; --kbl-ease-corte: cubic-bezier(.2,.7,.2,1); --kbl-ease-salida: cubic-bezier(.4, 0, 1, 1); /* — signo — */ --kbl-signo-min: 16px; --kbl-signo-resguardo: 28.75%; /* 46/160: el ancho del asta, por cada lado */ } :root[data-tema="carbon"] { --kbl-fondo: #15171A; --kbl-superficie: #1E2024; --kbl-superficie-2: #272A30; --kbl-linea: #32353C; --kbl-linea-fuerte: #6F737D; --kbl-tinta: #ECEBE6; --kbl-texto-2: #B3B2AD; --kbl-texto-3: #93928C; --kbl-desactivado: #4B4E55; --kbl-ok: #8FB587; --kbl-alerta: #D6AA51; --kbl-error: #D28D7F; --kbl-info: #8DACC4; --kbl-interactivo: #ECEBE6; --kbl-foco: #ECEBE6; } @media (prefers-color-scheme: dark) { :root:not([data-tema="papel"]) { --kbl-fondo: #15171A; --kbl-superficie: #1E2024; --kbl-superficie-2: #272A30; --kbl-linea: #32353C; --kbl-linea-fuerte: #6F737D; --kbl-tinta: #ECEBE6; --kbl-texto-2: #B3B2AD; --kbl-texto-3: #93928C; --kbl-desactivado: #4B4E55; --kbl-ok: #8FB587; --kbl-alerta: #D6AA51; --kbl-error: #D28D7F; --kbl-info: #8DACC4; --kbl-interactivo: #ECEBE6; --kbl-foco: #ECEBE6; } } /* Roles tipográficos. Una familia; el ancho y el tracking hacen la jerarquía. */ .kbl-titular { font-family: var(--kbl-fuente); font-weight: var(--kbl-peso-titular); font-stretch: var(--kbl-ancho-texto); letter-spacing: var(--kbl-tracking-titular); line-height: 1.1; text-wrap: balance; } .kbl-texto { font-family: var(--kbl-fuente); font-weight: var(--kbl-peso-texto); font-stretch: var(--kbl-ancho-texto); font-size: var(--kbl-t-16); line-height: var(--kbl-lh-16); } .kbl-etiqueta { font-family: var(--kbl-fuente); font-weight: var(--kbl-peso-medio); font-stretch: var(--kbl-ancho-etiqueta); font-size: var(--kbl-t-12); line-height: var(--kbl-lh-12); letter-spacing: var(--kbl-tracking-etiqueta); text-transform: uppercase; } .kbl-cifra { font-family: var(--kbl-fuente); font-weight: var(--kbl-peso-medio); font-variant-numeric: tabular-nums; }