/* ═══════════════════════════════════════════════════════════════ CAMENA 2.0 · variables.css Tokens del sistema. Nada de valores sueltos en los componentes: todo color, tamaño y ritmo sale de aquí. Contraste verificado en docs/verificar-contraste.py (WCAG AA). Paleta de taller: base de carbón y hueso, y TRES acentos con significado, no decorativos. Cada acento tiene un trabajo asignado y ninguno se usa «porque se ve bonito»: · ORO → el acento por defecto del sitio: marca, precios, CTA. · MAGENTA → el eje de sistemas: micro-sistemas, prototipos, operación. · VERDE → estado: disponibilidad, aprobado, lo que sí funciona. · CARBÓN → superficies, texto y todo lo que no es acento. Regla: un elemento lleva un solo acento. Nunca dos en el mismo componente, nunca degradados entre ellos. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Carbón y papel ───────────────────────────────────────── */ --ink: #111111; /* negro carbón, no negro puro de pantalla */ --ink-2: #181818; /* superficie oscura elevada */ --ink-3: #2B2B2B; /* separadores en oscuro (1.3:1, solo decorativo) */ --ink-4: #757570; /* 4.08:1 sobre tinta: bordes de control */ --paper: #F7F6F3; /* hueso muy sutil, no blanco clínico */ --paper-2: #FCFBF9; /* tarjetas, un punto más claras que el fondo */ --linea: #E3E1DB; --linea-2: #EFEDE7; /* ── Texto ────────────────────────────────────────────────── */ --texto: #111111; --texto-2: #5C5C58; /* 6.21:1 sobre hueso */ --texto-claro: #F4F3F0; --texto-claro-2:#A8A8A2; /* 7.90:1 sobre tinta: legible a 13-14 px */ /* ── Acentos: tres familias, tres tonos cada una ────────────── Cada familia necesita tres tonos porque el mismo color no sirve sobre papel y sobre carbón: `-tx` es para texto sobre claro, `-lt` para texto sobre oscuro, y el tono base pasa 3:1 en LOS DOS fondos, así que sirve para puntos, filetes y rellenos sin cambiar de token. */ /* Oro: acento principal */ --oro: #A8821F; /* gráfico: 3.31:1 sobre papel · 5.29:1 sobre tinta */ /* ── Rojo ladrillo: la línea fija del titular del hero ──────────── Entra como acento de UN solo trabajo: la primera línea del titular, la que no cambia nunca, mientras la segunda alterna en pistache. Dos tonos, como el resto de la paleta: el apagado para superficie clara y el aclarado para la tinta, porque sobre carbón el ladrillo puro se queda en 3.18:1 y no alcanza ni para texto grande con holgura. */ --rojo: #B23A2E; --rojo-lt: #D0614F; --rojo-tenue: rgba(178, 58, 46, 0.10); --rojo-linea: rgba(178, 58, 46, 0.34); --oro-lt: #E8C766; /* texto sobre oscuro (11.50:1 sobre tinta) */ --oro-tx: #8A6A0F; /* texto sobre claro (4.68:1 sobre hueso) */ --oro-tenue: rgba(168, 130, 31, 0.12); --oro-linea: rgba(168, 130, 31, 0.34); /* Magenta: el eje de sistemas */ --magenta: #D6247A; /* gráfico: 4.42:1 sobre papel · 3.95:1 sobre tinta */ --magenta-lt: #F472B6; /* texto sobre oscuro (7.13:1 sobre tinta) */ --magenta-tx: #A81B5A; /* texto sobre claro (6.54:1 sobre hueso) */ --magenta-tenue: rgba(214, 36, 122, 0.10); --magenta-linea: rgba(214, 36, 122, 0.34); /* Verde: estado (el que informa si algo está bien o disponible) */ --verde: #0E9F6E; /* gráfico: 3.13:1 sobre papel · 5.58:1 sobre tinta */ --verde-lt: #A9C46C; /* pistache: texto sobre oscuro (9.7:1 sobre tinta) */ --verde-tx: #0A6B4C; /* texto sobre claro (6.03:1 sobre hueso) */ --verde-tenue: rgba(169, 196, 108, 0.12); --verde-linea: rgba(169, 196, 108, 0.34); /* ── Fondos con color y sus filetes ─────────────────────────── Un fondo teñido obliga a repetir la cuenta del contraste: el mismo acento que se lee sobre hueso puede quedarse corto sobre un fondo de su propio color. Por eso cada fondo trae su tono de texto y su filete ya medidos. */ --oro-fondo: #F5EFDF; /* fondo cálido del hero (oro muy suave) */ --oro-fondo-suave: #F4EEE0; /* fondo de las tarjetas de marca y campañas */ --oro-fuerte: #6F550B; /* acento de texto sobre fondos oro (6.14:1) */ --filete-oro: #E4D9BE; /* filete sobre fondo oro (1.22:1, decorativo) */ --verde-fondo: #EFF4F0; /* fondo de las tarjetas de presencia y producción */ --filete-verde: #CBDDD3; /* filete sobre fondo verde */ /* ── Superficies y bordes por contexto ──────────────────────── Ojo con la distinción: `--linea` es un filete decorativo (1.2:1 basta), `--borde-fuerte` delimita un control y por eso necesita 3:1. */ --borde: var(--linea); --borde-fuerte: #6F6F69; /* 4.68:1 sobre hueso: es un control, no un filete */ --borde-oscuro: var(--ink-3); /* Acento contextual: los componentes leen SIEMPRE estos alias, nunca una familia concreta. Así una sección puede cambiar de acento —el bloque de sistemas va en magenta— sin tocar ni un componente. */ --acento: var(--oro-tx); --acento-grafico: var(--oro); --acento-suave: var(--oro-tenue); --acento-linea: var(--oro-linea); /* ── Tipografía ───────────────────────────────────────────── */ --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --texto-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ── La escalera: nueve escalones y ni uno más ──────────────────────── Antes cada título traía su propia fórmula —treinta clamp distintos para el mismo nivel de jerarquía— y la página acababa con 21 tamaños de letra distintos: eso es lo que la hacía verse improvisada, aunque cada sección por separado estuviera bien. Ahora hay nueve escalones y todo cae en uno. Las cifras entre paréntesis son lo que mide cada escalón en un escritorio de 1440 px. Para comprobarlo: `node docs/medir-escala.mjs`. Regla al agregar algo: si hace falta un tamaño que no está aquí, el error no es que falte el tamaño, es que la pieza está mal clasificada. */ /* Titular: dos frases completas. Medido con la fuente real y la columna ya ensanchada, cabe en dos líneas hasta 59.5 px a 1440, 55.8 a 1290 y 51.2 a 1141. La escala se ajusta a eso: 58 px en escritorio y 51 en la banda estrecha, sin un solo parche. */ /* Titular: bajado a 54 px en escritorio (antes 58). Medido con la frase más larga del rotador, sigue cabiendo en dos renglones en los trece anchos probados, pero con aire en vez de al filo. */ --t-n1: clamp(2rem, 1.5rem + 2.2vw, 3.375rem); /* 32 → 54 titular */ --t-n2: clamp(1.875rem, 1.4rem + 2.3vw, 3.25rem); /* 30 → 52 sección */ --t-n3: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); /* 28 → 44 bloque */ --t-n4: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 24 → 32 dentro del bloque */ --t-n5: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); /* 20 → 26 nombre de pieza */ --t-guia: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20 entrada */ --t-cuerpo: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem); /* 16 → 17 texto */ --t-menudo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); /* 13 → 14 letra chica */ --t-micro: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11 → 12 etiquetas */ /* Dos momentos de display, deliberados: la frase que se declara sola y la cifra gigante que funciona como textura, no como texto. */ --t-declara: clamp(2.25rem, 1.5rem + 4vw, 4.5rem); /* 36 → 72 */ --t-cifra: clamp(3.5rem, 2rem + 7vw, 8rem); /* 56 → 128 */ /* Ojo: --t-n1 es la escala del titular del hero, medida con la fuente real en 16 anchos (320 a 1600). Con el titular en dos líneas cortas cabe entero sin partirse ni una vez, y por eso no hay parches por banda. */ --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 700; --interlinea-titulo: 1.06; --interlinea-texto: 1.68; --interlinea-guia: 1.4; --tracking-titulo: -0.03em; --tracking-etiqueta: 0.16em; --tracking-mono: 0.06em; /* ── Espacio: escala de 4 ─────────────────────────────────── */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem; --e-9: 4rem; --e-10: 5rem; --e-11: 6.5rem; --e-12: 8rem; --ritmo-seccion: clamp(4.5rem, 3rem + 6vw, 9rem); --ritmo-bloque: clamp(1.5rem, 1rem + 2vw, 2.5rem); /* ── Medidas de layout ────────────────────────────────────── */ --ancho-max: 1240px; --ancho-texto: 66ch; --ancho-angosto: 46ch; --margen: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); --alto-cabecera: 4.5rem; /* ── Formas: bordes de taller, no pastillas de plantilla ──── */ --radio-sm: 3px; --radio: 6px; --radio-lg: 10px; --radio-control: 4px; /* ── Sombras ──────────────────────────────────────────────── */ --sombra-sm: 0 2px 10px rgba(17, 17, 17, 0.06); --sombra: 0 14px 40px rgba(17, 17, 17, 0.10); --sombra-lg: 0 26px 60px rgba(17, 17, 17, 0.18); /* ── Movimiento ───────────────────────────────────────────── */ --curva: cubic-bezier(0.2, 0.7, 0.25, 1); --curva-salida: cubic-bezier(0.16, 1, 0.3, 1); --dur-rapida: 160ms; --dur: 320ms; --dur-lenta: 620ms; /* ── Capas ────────────────────────────────────────────────── */ --z-fondo: 0; --z-contenido: 1; --z-flotante: 40; --z-cabecera: 50; --z-menu: 60; --z-saltar: 80; scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4)); } /* En superficies oscuras el acento cambia de tono para cumplir contraste. */ .seccion--oscura, .pie, .llamada, .custom, .lab-pieza__visual { --borde: var(--borde-oscuro); --borde-fuerte: var(--ink-4); --acento: var(--oro-lt); --acento-grafico: var(--oro); --acento-suave: rgba(168, 130, 31, 0.12); --acento-linea: var(--oro-linea); --sombra-sm: 0 2px 10px rgba(0, 0, 0, 0.3); --sombra: 0 14px 40px rgba(0, 0, 0, 0.4); --sombra-lg: 0 26px 60px rgba(0, 0, 0, 0.5); } /* Ojo: esta regla es del hero CLARO y ya no aplica —el hero es tinta desde que se cambió el fondo—, pero se deja escrita para que nadie la reviva por error. El contexto real del hero se declara en css/layout.css, en la regla .hero, que carga después y por eso manda: ahí el acento es el oro claro. */ .hero-sobre-oro-ya-no-existe { --acento: var(--oro-fuerte); --acento-grafico: var(--oro-fuerte); --acento-suave: rgba(111, 85, 11, 0.10); --acento-linea: rgba(111, 85, 11, 0.30); --borde: var(--filete-oro); } /* ── Contextos oscuros: aquí el acento es verde ─────────────────── Estas tres zonas —la banda de sistemas, los prototipos y la segunda línea del titular— iban en magenta. El dueño pidió cambiar el texto rosa por verde, y como el rosa era UN acento con UN trabajo, se cambia el acento entero y no solo la letra: con el texto en verde y los filetes en rosa, la zona se lee descuadrada. Todo lo demás sigue en oro. Nota de historia: aquí vivía el bug de contraste más serio que tuvo el sitio. Cuando el hero pasó de fondo oro a fondo tinta se corrigió el magenta para las secciones oscuras pero no para el titular, que se quedó con el magenta oscuro (#A81B5A) pensado para fondo claro: 2.67:1, casi ilegible. El verde claro que se usa ahora es para superficie oscura; sobre claro no se usa nunca. */ .etapa--destacada, #lab, .hero__titulo { --acento: var(--verde-lt); --acento-grafico: var(--verde); --acento-suave: var(--verde-tenue); --acento-linea: var(--verde-linea); } /* ── Paleta de las maquetas del LAB ─────────────────────────────── Las interfaces dibujadas del LAB usan su propia escala de carbón. Está calculada contra el fondo más claro que pueden tener (#1A1A1A) para que cualquier texto pase AA, aunque sea de 10 px. Los colores con significado (aprobado, en proceso, sin anticipo) se quedan: son estados, no decoración. */ :root { --mock-1: #1A1A1A; /* superficie de panel */ --mock-0: #141414; /* superficie hundida */ --mock-texto: #F2F1EE; --mock-2: #C6C5C1; /* texto secundario */ --mock-3: #9C9B97; /* texto terciario / etiquetas */ --mock-tenue: #8C8B87; /* micro-etiquetas de 10 px: 5.10:1 sobre --mock-1 */ --mock-acento: #F472B6; --mock-azul: #7FB5C9; --mock-verde: #6FD79B; --mock-naranja: #E0A87F; --mock-rosa: #C9A0C9; --mock-acento-linea: rgba(244, 114, 182, 0.42); /* ── Tonos suaves para las tarjetas de diagnóstico ──────────────── Siete fondos muy claros, uno por tarjeta, para que la rejilla no se lea como siete bloques iguales. Todos están por encima de L* 94: el texto de tinta encima da más de 15:1, así que el tono es ambiente, no información. Ninguno se usa para texto ni para filetes. */ --tinte-0: #141C18; /* carbón con tinte verde: sin uso desde que las seis tarjetas del diagnóstico pesan igual */ --tinte-1: #F7F6F3; /* papel */ --tinte-2: #F5EFDF; /* oro */ --tinte-3: #EFF4F0; /* verde */ --tinte-4: #F6F1E7; /* arena */ --tinte-5: #EEF2F5; /* niebla */ --tinte-6: #F7F0EC; /* arcilla */ --tinte-7: #F1F3EC; /* salvia */ }