/** * Bocause Nutrition — tokens de diseño. * * Dos capas a propósito: * * Capa 1 Paleta cruda. Los valores literales viven AQUÍ Y SOLO AQUÍ. * Capa 2 Roles semánticos. Es lo único que pueden usar los componentes. * * Ningún componente debe referirse a la capa 1 ni escribir un hex suelto: * siempre var(--bc-marca), nunca var(--bc-verde-azulado) ni #0F6E63. * * Base: design system de la clínica (amarillo #F4D000 + navy #1A222F, * display Antonio). Lo que no venía dado —color de texto de marca, color * funcional de negación, neutros, fuente de texto y monoespaciada— está * propuesto aquí y marcado con PROPUESTA. * * Todos los pares texto/fondo de este archivo están comprobados contra * WCAG 2.1 AA (4.5:1 para texto normal). El ratio va anotado en cada uno. */ :root { /* --------------------------------------------------------------- CAPA 1 — Paleta cruda --------------------------------------------------------------- */ /* Marca, dados */ --bc-amarillo: #F4D000; --bc-amarillo-oscuro: #DCBB00; /* hover */ --bc-amarillo-palido: #FDF6D4; /* fondos de sección cálidos */ --bc-navy: #1A222F; --bc-navy-suave: #263042; /* superficie oscura secundaria, hover */ /* PROPUESTA — verde azulado. Es el color de marca utilizable como TEXTO. El amarillo no puede serlo (ver nota de contraste más abajo), así que hace falta un tercer tono para enlaces, precio por dosis, sello y ✓. Hereda la función que tenía el verde pino en el handoff. */ --bc-verde-azulado: #0F6E63; --bc-verde-azulado-oscuro: #0B564D; --bc-verde-azulado-palido: #E6F0EE; /* PROPUESTA — ladrillo. Color FUNCIONAL, nunca decorativo: el glifo ✕ de "para quién no", "evidencia BAJA" de la tabla del artículo y errores de formulario. El amarillo no sirve para negar y el navy no distingue. */ --bc-ladrillo: #B33A32; /* Neutros. Derivados del navy para que no desafinen: los grises llevan su mismo matiz frío en lugar de ser grises puros. */ --bc-papel: #FAF9F5; --bc-papel-sombra: #F1EFE8; --bc-blanco: #FFFFFF; --bc-gris-texto: #3A4250; --bc-gris: #5E6675; --bc-negro-video: #10151C; /* --------------------------------------------------------------- CAPA 2 — Roles semánticos. Lo único que consumen los componentes. --------------------------------------------------------------- */ /* ACCIÓN — CTA de compra, botón de newsletter, botones de filtro activos. El amarillo es superficie, jamás texto: lleva navy encima (10,6:1). */ --bc-primario: var(--bc-amarillo); --bc-primario-hover: var(--bc-amarillo-oscuro); --bc-primario-suave: var(--bc-amarillo-palido); --bc-sobre-primario: var(--bc-navy); /* MARCA — el tono de marca seguro sobre fondo claro: enlaces, precio por dosis, sello "Elegido por Bocause", glifos ✓, cajas de aviso sanitario, ahorro de los packs. (5,8:1 sobre papel) */ --bc-marca: var(--bc-verde-azulado); --bc-marca-hover: var(--bc-verde-azulado-oscuro); --bc-marca-suave: var(--bc-verde-azulado-palido); --bc-sobre-marca: var(--bc-papel); /* NEGATIVO — solo negación y error. (5,6:1 sobre papel) */ --bc-negativo: var(--bc-ladrillo); /* ACENTO decorativo — reglas, bordes y subrayados donde el contraste no aplica porque no hay texto encima. Nunca para texto. */ --bc-acento: var(--bc-amarillo); /* Superficies */ --bc-fondo: var(--bc-papel); --bc-fondo-alt: var(--bc-papel-sombra); --bc-superficie: var(--bc-blanco); --bc-fondo-oscuro: var(--bc-navy); --bc-fondo-oscuro-2: var(--bc-navy-suave); --bc-fondo-video: var(--bc-negro-video); /* Texto sobre claro */ --bc-texto: var(--bc-navy); /* 16,0:1 sobre papel */ --bc-texto-largo: var(--bc-navy); --bc-texto-2: var(--bc-gris-texto); /* 9,6:1 */ --bc-texto-3: var(--bc-gris); /* 5,4:1 — vale para el mono de 11px */ /* Texto sobre oscuro */ --bc-texto-inv: var(--bc-papel); --bc-texto-inv-2: rgb(250 249 245 / 72%); --bc-linea-inv: rgb(250 249 245 / 20%); --bc-borde-inv: rgb(250 249 245 / 35%); /* bordes de campos y sellos */ --bc-campo-inv: rgb(250 249 245 / 8%); /* fondo de campos de formulario */ /* Sobre fondo oscuro el amarillo SÍ funciona como texto (10,6:1): es donde se usa para cifras y kickers en las bandas navy. */ --bc-texto-inv-marca: var(--bc-amarillo); /* Líneas */ --bc-linea: rgb(26 34 47 / 18%); --bc-borde-fuerte: 2.5px solid var(--bc-texto); --bc-borde-medio: 2px solid var(--bc-texto); --bc-borde-fino: 1.5px solid var(--bc-texto); --bc-regla: 8px; /* --------------------------------------------------------------- Tipografía --------------------------------------------------------------- Tres roles. display Antonio. Condensada, solo para H1, H2 y cifras grandes (precios, datos de la franja). A 17px se estrecha demasiado, así que los nombres de producto NO la usan. texto PROPUESTA: IBM Plex Sans. Cuerpo, UI, nombres de producto. dato PROPUESTA: IBM Plex Mono. La monoespaciada del bloque "etiqueta nutricional", precios por dosis, etiquetas en mayúsculas, firmas de autoría y referencias. Plex Sans y Plex Mono son la misma superfamilia y comparten esqueleto, así que las filas etiqueta/dato quedan alineadas en lugar de parecer dos fuentes pegadas. Ambas OFL, como Antonio. ⚠ Ni Antonio ni IBM Plex Sans llegan a 800/900: las dos se paran en 700. La escala de pesos del handoff (900 para H1 y precios, 800 para H2) no se puede cumplir literalmente. Antonio Bold, al ser condensada, da el mismo peso visual. */ --bc-fuente-display: "Antonio", "Oswald", "Arial Narrow", system-ui, sans-serif; --bc-fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bc-fuente-dato: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --bc-peso-display: 700; --bc-peso-fuerte: 700; --bc-peso-medio: 600; --bc-peso-normal: 400; /* Radios */ --bc-r-xs: 3px; --bc-r-s: 4px; --bc-r-m: 5px; --bc-r-l: 6px; --bc-r-pill: 999px; /* Movimiento. El handoff prohíbe parallax, reveals y sliders automáticos. */ --bc-trans: 200ms; /* La única sombra del sistema: desplazamiento sólido, sin desenfoque. En amarillo es donde mejor funciona: se lee como un subrayado de marca. */ --bc-sombra-hover: 0 5px 0 var(--bc-acento); } @media (prefers-reduced-motion: reduce) { :root { --bc-trans: 1ms; } }