/* ============================================================================ SISTEMA — los tokens del encargo de rediseno integral. El encargo pide una nomenclatura concreta: `--bg-primary`, `--accent-lime`, `--success`… Este fichero la crea y la ATA a los tokens que ya existen, en vez de duplicar valores. POR QUE ATAR Y NO DUPLICAR Si `--accent-lime` llevara escrito `#E0FA4E`, el dia que cambie el lima habria dos verdades y una de las dos se quedaria vieja sin avisar. Aqui hay una sola fuente: `tokens.css`. Esto es la traduccion. Y por que existe la traduccion: los nombres de `tokens.css` estan en espanol y dicen lo que significan en ESTE producto —`--no-peligro` es «contiene», no «rojo»—. Los del encargo son los de un sistema de diseno generico. Conviven: los componentes nuevos usan estos, el motor de seguridad sigue usando los suyos. ========================================================================= */ :root { /* ── Superficies ─────────────────────────────────────────────────────── */ --bg-primary: var(--no-lienzo); /* carbon #151517 */ --bg-secondary: var(--no-lienzo-2); /* #202024 */ --surface-primary: var(--no-fondo); /* blanco: la hoja */ --surface-secondary: var(--no-superficie); /* blanco roto calido */ --surface: var(--surface-primary); /* alias corto */ --surface-muted: var(--surface-secondary); --border: var(--no-borde); --shadow: var(--no-sombra); --shadow-alta: var(--no-sombra-alta); --shadow-hoja: var(--no-sombra-hoja); /* ── Texto ───────────────────────────────────────────────────────────── */ --text-primary: var(--no-tinta-pauta); --text-secondary: var(--no-tinta-media); --text-on-dark: var(--no-sobre-lienzo); --text-on-dark-2: var(--no-sobre-lienzo-2); /* 9.05:1 sobre el carbón */ /* El violeta es MUCHO más claro que el carbón, así que su texto secundario no puede ser el mismo gris: #B6B6BE sobre violeta da 3.13:1 y no pasa. #E3E0FA da 4.90:1 y conserva la jerarquía frente al blanco puro. */ --text-on-purple: #E3E0FA; /* ── Acentos ─────────────────────────────────────────────────────────── */ --accent-lime: var(--no-lima); --accent-purple: var(--no-violeta); --accent-pink: var(--no-rosa-pauta); /* ── Estado ─────────────────────────────────────────────────────────────── OJO: estos NO son decorativos. Son la escala semaforica del motor y cada uno significa un estado del analisis. `--success` se llama asi por el encargo, pero en este producto quiere decir «declarado sin», que NO es lo mismo que «seguro». Ver `docs/ALLERGEN_ENGINE.md`. */ --success: var(--no-ok); /* declarado sin */ --warning: var(--no-aviso); /* puede contener */ --danger: var(--no-peligro); /* contiene */ --unknown: var(--no-duda); /* informacion insuficiente */ --success-bg: var(--no-ok-fondo); --warning-bg: var(--no-aviso-fondo); --danger-bg: var(--no-peligro-fondo); --unknown-bg: var(--no-duda-fondo); /* ── Espaciado: la escala completa del encargo ────────────────────────── Se anaden 80, 96 y 128, que faltaban. Los ocho primeros son los `--no-e*` de siempre, para no romper nada de lo ya escrito. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; --no-e9: 80px; --no-e10: 96px; --no-e11: 128px; /* Separacion entre secciones grandes. Escritorio 96–160, movil 64–96. */ --seccion: clamp(var(--space-8), 9vw, 160px); /* ── Radios: marcan jerarquia, no se aplican a todo ──────────────────── 12 controles pequenos: chip, distintivo, campo 16 tarjeta dentro de otra cosa 20 tarjeta suelta 24 panel 32 panel grande y hoja */ --radius-1: 12px; --radius-2: 16px; --radius-3: 20px; --radius-4: 24px; --radius-5: 32px; --radius-pill: 999px; /* ── Rejilla ──────────────────────────────────────────────────────────── 12 columnas en escritorio, 8 en tableta, 4 en movil. El ancho maximo sube de 76 rem (1216 px) a 1560: el encargo pide expresamente aprovechar mejor la pantalla. */ --ancho-max: 1560px; /* El ancho de LECTURA es otro token y otro problema. Un parrafo largo recorriendo 1560 px son 200 caracteres por linea y el ojo pierde el renglon al volver. */ --ancho-lectura: clamp(20rem, 60vw, 44rem); /* 640–704 px: texto editorial */ --ancho-entrada: clamp(20rem, 72vw, 56rem); /* 700–900 px: entradillas */ --ancho-texto: var(--ancho-lectura); --canal: clamp(24px, 4vw, 72px); --gutter: clamp(16px, 1.6vw, 24px); --columnas: 4; /* ── Tipografia: la escala del encargo ─────────────────────────────────*/ --t-h1: clamp(2.6rem, 6vw, 6rem); /* 42 → 96 px */ --t-h2: clamp(2rem, 4vw, 4.25rem); /* 32 → 68 px */ --t-h3: clamp(1.5rem, 2.4vw, 2.5rem); /* 24 → 40 px */ --t-body-l: clamp(1.125rem, 1.4vw, 1.375rem); --t-body: clamp(1rem, 1.1vw, 1.125rem); /* ── Movimiento ─────────────────────────────────────────────────────────*/ --dur-rapida: 150ms; --dur-media: 220ms; --curva: cubic-bezier(.2,.7,.3,1); } @media (min-width: 768px) { :root { --columnas: 8; } } @media (min-width: 1200px) { :root { --columnas: 12; } } /* Quien no quiera movimiento, no lo tiene. No es una preferencia menor: hay gente a la que el parallax le produce nauseas. */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0ms; --dur-media: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── La reticula ────────────────────────────────────────────────────────── */ .rejilla-12 { display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); gap: var(--gutter); } .contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--canal); } /* ── Foco visible. No negociable ──────────────────────────────────────────── El encargo lo subraya y la norma lo exige. Dos anillos —uno claro y otro oscuro— para que se vea tanto sobre el carbon como sobre la hoja blanca. */ :focus-visible { outline: 3px solid var(--accent-lime); outline-offset: 3px; border-radius: 4px; }