/* ============================================================================ TOKENS · «NEGRONI VERDE» · el candado del rediseño 15/09/2026 · spec: docs/DISENO_NEGRONI.md EL PUENTE DE NOMBRES VIEJOS SE BORRÓ EL 15/09/2026, por la tarde, y con él se cerró el rediseño: ninguna pantalla de `portal/` pide ya --paper, --olive, --gold, --ink-soft, --line-2 ni --red, y ninguna escribe un color a mano. La comprobación es un grep de esos seis nombres en portal/. ESTE ES EL ÚNICO ARCHIVO DONDE VIVE UN VALOR DE ESTILO. Ninguna pantalla escribe un color, un radio, una sombra ni un tiempo sueltos: todo referencia a una variable de aquí. Si necesitas un valor que no está, se agrega aquí y se usa por su nombre — no se escribe en la pantalla. Los valores son EXACTOS los de la propuesta aprobada (docs/propuesta_negroni.html, bloque `#mock[data-concept="negroni"]`). No se ajustan a ojo: la paleta de datos pasó validación de contraste y de daltonismo, y cambiar un color obliga a repetirla. ============================================================================ */ :root{ /* ---- superficie ---- */ --bg: #0A130E; --bg-glow: radial-gradient(1100px 480px at 78% -8%, #16402A 0%, #0A130E 58%); --card: rgba(19,33,26,.78); --card-border: rgba(126,205,156,.13); --card-blur: blur(10px); /* Superficie OPACA de los campos de formulario. `--card` es semitransparente y para un campo no sirve: el autorrelleno del navegador se pinta debajo y se transparenta. Es la misma superficie sobre la que se validó el contraste de la paleta de datos. */ --campo: #12201A; /* El velo detras del expediente. El valor de antes (rgba(36,38,30,.42)) estaba pensado para oscurecer un fondo CLARO y sobre el tema oscuro no separaba nada. */ --velo: rgba(0,0,0,.62); /* LA PLACA DONDE SE POSA UN LOGO AJENO · 17/09/2026. El logo de un cliente llega como llega: el de BC-CPG es dorado y se lee sobre el fondo oscuro, pero el de Gran Ciudad es gris oscuro y desaparece, y el de JCDecaux es azul marino. Sobre `--card`, que es casi negro, dos de los tres logos cargados no se leen — se vio en la pantalla, no en el código. Esta es la superficie CLARA sobre la que se posa cualquiera de ellos, que es lo que hace todo directorio de marcas y por lo que las marcas se entregan «para fondo claro». Sólo para marcas ajenas: ni texto ni datos se pintan encima, así que no entra en la validación de contraste de la paleta. El logo del despacho no la necesita: es nuestro y está hecho para el tema. */ --placa-marca: #F4F1EA; --radius: 18px; --shadow: 0 18px 44px rgba(0,0,0,.34); /* La sombra del panel lateral (el expediente que entra por la derecha): la misma oscuridad que --shadow, tirada hacia la izquierda porque el panel esta pegado al borde derecho. Y la sombrita de la perilla del interruptor, que es lo unico que la lleva. */ --shadow-lateral: -18px 0 50px rgba(0,0,0,.34); --shadow-perilla: 0 1px 2px rgba(0,0,0,.15); /* ---- tinta ---- */ --ink: #EAF3EC; /* texto principal */ --soft: #9BB0A1; /* texto secundario */ /* 15/09/2026 · el valor de la spec era #6E8276 y daba 4.06:1 sobre la tarjeta: NO pasa AA en los tamanos chicos donde este token se usa (etiquetas de 10px, encabezados de tabla). Medido en el deploy preview con la formula de WCAG, no a ojo; se aclaro el MISMO tono hasta el primer valor con margen: 4.90:1. La spec manda no ajustar a ojo la paleta de DATOS (--c-*); este es un token de tinta y el QA exige AA (punto 3). */ --mut: #7C9084; /* etiquetas y metadatos */ --num: #F4FCF5; /* números protagonistas */ --line: rgba(234,243,236,.09); /* ---- acento · UI (botones, nav activa, focos). Se usa con avaricia ---- */ --accent: #4ADE80; --accent-ink: #07160D; /* texto SOBRE el acento */ --wash: rgba(74,222,128,.12); /* ---- datos · gráficas y badges por ramo ---- PALETA VALIDADA (≥3:1 sobre la superficie de tarjeta #12201A) y revisada para daltonismo CON LA CONDICIÓN de que toda gráfica lleve etiqueta directa o leyenda con valores: NUNCA color solo. No se sustituye a ojo. */ --c-gmm: #238B54; --c-vida: #A8861B; --c-dental: #8A7BDD; --c-baja: #E58A6E; /* SEMÁNTICO: bajas y alertas. Nunca como «serie 4». */ --grid: rgba(234,243,236,.09); /* OPERACIÓN · 14/10/2026. Cómo terminó una póliza o un recibo, en este orden fijo (validado con validate_palette.js contra la tarjeta #13211A: pasa; el par verde-oro queda en 7.3 de daltonismo, por eso toda barra de Operación lleva su etiqueta escrita). La magnitud sola va en --op-barra. */ --op-bien: #2FA463; /* renovada · pagado */ --op-fin: #5C82D6; /* terminada */ --op-ojo: #B08419; /* sin actualizar · pendiente */ --op-perdida: #D3509B; /* cancelada · cancelado */ --op-barra: #3E9E68; --op-barra-2: rgba(234,243,236,.16); /* ---- el color de cada tarjeta · 21/10/2026 (rediseño 2b2, parte j «claro y fácil») ---- Las cifras de Programa, los accesos y los atajos de Documentos llevan cada uno su tono. No son colores nuevos: son los de arriba con nombre de tarjeta, y su letra sale mezclada con la tinta para que lea en los dos temas. */ --k-oro: var(--rma-oro); --k-azul: var(--op-fin); --k-salmon: var(--c-baja); --k-verde: var(--c-gmm); --k-rosa: var(--op-perdida); --k-bosque: var(--rma-bosque-2); /* EL QUINTO RAMO · Accidentes Personales · 17/09/2026, por encargo de Rafa. Hasta hoy AP no tenía color: el badge tomaba prestado el de Dental y la gráfica el de GMM, así que **el badge y el cuadrito de la leyenda decían ramos distintos para la misma póliza** —se veía en el demo, con WOODSTOCK en morado arriba y en verde en la dona—. Con cinco colores de datos más el semántico el espacio ya está apretado: el barrido (mismas condiciones que Conversión, en pantalla y en papel) deja fuera todos los tonos salvo el rosa, y de ahí sale éste. Lo medido: 4.28:1 como objeto y 5.07:1 el badge en pantalla, 4.54:1 y 6.06:1 en papel; y de los otros cinco colores, lo más cerca que pasa en pantalla es ΔE 26.4 en visión normal, 16.7 en protanopía, 13.6 en deuteranopía y 13.1 en tritanopía (en papel: 26.1 · 13.2 · 16.0 · 13.9). Ninguno baja de 13, que es el suelo con el que se admitió: por encima del «se confunden» (10) y a la altura de los pares que ya conviven —GMM y Vida quedan en 12.0 en protanopía desde el rediseño—. */ --c-ap: #DE458C; /* VALIDADO EL 17/09/2026 · era el azul #4F9BD9 y no pasaba (decisión de Rafa). La spec entrega TRES colores de datos —GMM, Vida y Dental— y el portal tiene CUATRO ramos: éste se eligió BARRIENDO el espacio de color con las mismas pruebas que pasaron los otros tres, no a ojo, que es lo que la spec prohíbe. Lo que falló el azul, medido con la fórmula de WCAG y la simulación de Viénot 1999, no a ojo: · en PAPEL daba 2.99:1 sobre blanco (umbral 3:1 de objeto gráfico) y su badge 3.98:1 (umbral 4.5:1 de texto chico), porque el bloque @media print de abajo redefine los otros cuatro colores de ramo y a éste lo OLVIDABA: el azul de pantalla se iba al papel tal cual; · y en PANTALLA se confundía con Dental al simular daltonismo —ΔE2000 de 2.7 en deuteranopía, 6.9 en protanopía—: el mismo color para quien no distingue el azul del morado. Lo que da el de ahora, con el mismo método: · pantalla: 10.31:1 como objeto sobre la tarjeta, 7.47:1 el badge; · papel (`--c-conversion` del bloque print): 3.66:1 y 4.54:1; · separación de GMM, Vida, Dental y --c-baja en visión normal y en las tres dicromacias: lo más cerca que queda es ΔE 20.0 (de Dental, en deuteranopía) en pantalla y ΔE 15.6 (de Dental, en tritanopía) en papel. Sigue valiendo la condición de la spec: toda gráfica lleva etiqueta directa con su valor, el color acompaña y nunca informa solo. Si se cambia, se vuelve a medir: el barrido está en el ESTADO, «EL COLOR DE CONVERSIÓN». */ --c-conversion: #70DAE6; /* ---- el color de un ramo, PARA TEXTO CHICO ---- Los cuatro colores de arriba se validaron a >=3:1, que es el umbral de un OBJETO GRAFICO: una barra, un segmento de dona. Usados como TEXTO de 10 u 11px el umbral es 4.5:1, y ahi los cuatro fallaban (entre 3.26:1 y 4.36:1, medido el 15/09/2026 en el sitio, componiendo los fondos semitransparentes sobre los de abajo). No son dos paletas: es el MISMO color aclarado hacia la tinta del tema hasta que se lee, asi que el ramo se reconoce igual. Se derivan del token, no se inventan; y como se definen en terminos de `--c-*` y `--ink`, al imprimir siguen solos a la paleta clara. Quedan entre 5.04:1 y 5.95:1. OJO: la proporción es 70% EN PANTALLA y 60% EN PAPEL; el bloque de impresión de más abajo los vuelve a declarar y dice por qué. */ --c-gmm-txt: color-mix(in srgb, var(--c-gmm) 70%, var(--ink)); --c-vida-txt: color-mix(in srgb, var(--c-vida) 70%, var(--ink)); --c-dental-txt: color-mix(in srgb, var(--c-dental) 70%, var(--ink)); --c-conversion-txt: color-mix(in srgb, var(--c-conversion) 70%, var(--ink)); --c-ap-txt: color-mix(in srgb, var(--c-ap) 70%, var(--ink)); --c-baja-txt: color-mix(in srgb, var(--c-baja) 70%, var(--ink)); /* ---- lavados y filos de un color de ramo ---- Fondo de una ficha y su filo, en el color del ramo. Son los tres valores que el puente de nombres viejos (--gold-soft, --gold-line, --red-wash) tenia escritos a mano; aqui salen del token, no de un hexadecimal, y dan exactamente el mismo color: color-mix con `transparent` es el mismo RGB con esa opacidad. En papel se fijan aparte, mas abajo. */ --vida-wash: color-mix(in srgb, var(--c-vida) 16%, transparent); --vida-line: color-mix(in srgb, var(--c-vida) 32%, transparent); --baja-wash: color-mix(in srgb, var(--c-baja) 14%, transparent); /* ---- LA COPIA DEL TEMA OSCURO · Piel, 28/09/2026 ---- Una propiedad propia con var() se RESUELVE donde se declara y hereda ya resuelta: estas copias guardan los valores de :root aunque una zona de más abajo redefina --ink o --card. Es lo que deja a una tarjeta oscura volver al tema oscuro dentro del área clara (ver «TEMA bosque», al final) sin repetir un solo color. En papel, :root es claro y estas copias también. */ --osc-ink: var(--ink); --osc-num: var(--num); --osc-line: var(--line); --osc-accent: var(--accent); --osc-accent-ink: var(--accent-ink); --osc-wash: var(--wash); --osc-grid: var(--grid); --osc-c-gmm: var(--c-gmm); --osc-c-vida: var(--c-vida); --osc-c-dental: var(--c-dental); --osc-c-conversion: var(--c-conversion); --osc-c-ap: var(--c-ap); --osc-c-baja: var(--c-baja); /* ---- movimiento ---- */ --t-hover: .18s; --ease-rise: cubic-bezier(.22,.8,.3,1); /* ---- tipografía ---- Una letra para display y números y otra para cuerpo (spec). Se conservan los NOMBRES que el portal ya usa en sus 568 renglones de estilo (`--ff-display` y `--ff`) para no tocar cada regla sólo por renombrar: lo que cambia es a qué apuntan. Desde la Piel (28/09/2026) las fuentes ya NO vienen de Google Fonts: viven en `portal/fuentes/` y las declara `piel.css` (@font-face). Desde la vuelta 2 (28/09/2026) Sora ya no está: `--ff-display` es Instrument Sans (cifras, etiquetas, badges) y los TÍTULOS van en Instrument Serif por sus propias reglas en piel.css. */ --ff-display: "Instrument Sans", system-ui, sans-serif; --ff: "Instrument Sans", system-ui, sans-serif; /* ---- LA MARCA DEL SITIO · «Piel», 28/09/2026 ---- La identidad del sitio nuevo (assets/rma.css de `elefante2`), con los mismos valores y el prefijo `--rma-`. El prefijo no es adorno: `--tinta` sin él ya lo piden cuatro reglas de Daños sin que nadie lo defina (heredan el color por accidente), y definirlo con la tinta oscura del sitio las pintaría oscuras sobre el fondo oscuro. Las decisiones de Rafa del 28/09: marco oscuro (noche, bosque) y área de trabajo clara (papel, lino); el verde `--accent` se queda como color del portal (acciones primarias y «al día»); el oro sólo en tipografía, líneas, foco y remates, y sobre claro es `--rma-oro-osc` (el claro no alcanza contraste); altas en verde y bajas en salmón (`--c-baja`, que ya es #E58A6E). */ --rma-bosque: #16332A; --rma-bosque-2: #1D4034; --rma-noche: #0D1F18; --rma-oro: #C9A24E; --rma-oro-2: #D8B465; --rma-oro-osc: #8C6A1F; --rma-oro-line: rgba(201,162,78,.38); --rma-lino: #EEF1EC; --rma-papel: #F6F4EE; --rma-blanco: #FAFBF8; --rma-tinta: #15221C; --rma-suave: #55645B; --rma-suave-d: #A9BCB1; --rma-linea: #D9DFD8; --rma-linea-d: rgba(238,241,236,.12); /* La línea inferior de un campo sobre oscuro. La del sitio (.25) da 2.13:1 contra noche y un control necesita 3:1 para verse; con .38 da 3.26:1. */ --rma-linea-campo: rgba(238,241,236,.38); /* La misma línea sobre CLARO (los campos de Solicitudes): 3.31:1 sobre papel y 3.51:1 sobre blanco. */ --rma-linea-campo-claro: #7D8980; --rma-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --rma-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Los radios y la sombra de las tarjetas oscuras del sitio (14–18 px, borde fino, sombra larga), y el tiempo de las transiciones cortas del portal. */ --rma-radio: 16px; --rma-radio-chico: 14px; --rma-sombra: 0 30px 60px rgba(0,0,0,.35); --rma-t: .2s; } /* ============================================================================ IMPRIMIR SALE EN CLARO · SIEMPRE (regla dura 5 del encargo) ---------------------------------------------------------------------------- El tema oscuro de pantalla JAMÁS llega al papel. En vez de repetir la regla en cada bloque `@media print` del portal —hay tres—, aquí se devuelven TODOS los tokens a una paleta clara: cualquier pantalla, convertida o no, imprime legible sin que nadie se acuerde de ella. Los valores son los del portal ANTES del rediseño, para que lo impreso salga como salía: fondo papel, tinta #24261E, olivo y oro del despacho. ============================================================================ */ @media print{ :root{ --bg: #FFFFFF; --bg-glow: none; --card: #FFFFFF; --card-border: #DADEC6; --card-blur: none; --campo: #FFFFFF; --velo: rgba(0,0,0,.2); --shadow: none; --ink: #24261E; --soft: #5A5D4E; --mut: #5A5D4E; --num: #24261E; --line: #E7E5DB; --accent: #4F5A33; --accent-ink: #FFFFFF; --wash: #EEF0E4; --c-gmm: #4F5A33; --c-vida: #B08A3C; --c-dental: #5E54C8; /* 17/09/2026: ESTE RENGLÓN FALTABA. Los otros cuatro colores de ramo se convertían al imprimir y Conversión no, así que el color de pantalla se iba al papel tal cual y quedaba por debajo del umbral sobre blanco. Es el mismo tono del de pantalla, oscurecido hasta que se lee en papel. */ --c-conversion: #1C93A0; --c-ap: #E1197A; /* el quinto ramo, en papel · 17/09/2026 */ --c-baja: #9A4B33; --grid: #E7E5DB; --op-bien: #2A8F55; /* Operación en papel, validado contra blanco */ --op-fin: #4A6FC0; --op-ojo: #9A7414; --op-perdida: #B83D86; --op-barra: #2A8F55; --op-barra-2: #D9DFD8; /* LA TINTA DEL BADGE, EN PAPEL, LLEVA MÁS TINTA QUE EN PANTALLA · 17/09/2026. La fórmula de arriba (70% del color + 30% de la tinta) se validó sobre la tarjeta OSCURA. En papel el fondo es blanco y el mismo 70% no alcanza: el badge de Vida impreso daba 4.17:1 contra el umbral de 4.5:1 de texto chico, medido el 17/09 al probar el papel por primera vez. Con 60% + 40% los seis pasan y ninguno pierde su color: Vida sube de 4.17 a **4.88:1**, GMM a 7.62, Conversión a 5.27, Dental a 6.85, AP a 6.06 y bajas a 6.99. Se cambia la PROPORCIÓN, no el color de datos, que es la regla de la spec. Lo comprueba `probar_colores_portal.py`, que lee de aquí tanto los colores como la proporción de cada tema. */ --c-gmm-txt: color-mix(in srgb, var(--c-gmm) 60%, var(--ink)); --c-vida-txt: color-mix(in srgb, var(--c-vida) 60%, var(--ink)); --c-dental-txt: color-mix(in srgb, var(--c-dental) 60%, var(--ink)); --c-conversion-txt: color-mix(in srgb, var(--c-conversion) 60%, var(--ink)); --c-ap-txt: color-mix(in srgb, var(--c-ap) 60%, var(--ink)); --c-baja-txt: color-mix(in srgb, var(--c-baja) 60%, var(--ink)); /* Los lavados y filos de ramo, en papel: los mismos valores opacos que imprimia el portal antes del redisenno. Y las dos sombras, apagadas como --shadow. */ --vida-wash: #F3EAD4; --vida-line: #E6D5A8; --baja-wash: #F5E7E1; --shadow-lateral: none; --shadow-perilla: none; } /* Y por si una regla vieja pintó un fondo a mano antes de convertirse. */ html, body{ background: #FFFFFF !important; color: #24261E !important; } } /* ============================================================================ MOVIMIENTO · se apaga entero cuando el sistema lo pide El portal ya respetaba `prefers-reduced-motion`; aquí se deja dicho también sobre los tokens de tiempo, para que una animación nueva no se escape. ============================================================================ */ @media (prefers-reduced-motion: reduce){ :root{ --t-hover: 0s; } *{ animation: none !important; transition: none !important; } } /* ============================================================================ EL ÁREA DE TRABAJO CLARA · Piel, paso 3, 28/09/2026 ---------------------------------------------------------------------------- Decisión de Rafa (28/09): marco oscuro —barra, acceso, tarjetas de cifras en noche y bosque— y área de trabajo clara —papel y lino— para tablas y formularios, que se leen e imprimen sobre claro. CÓMO: igual que el bloque de impresión, redefiniendo los MISMOS tokens dentro de una zona, así que cualquier regla que ya pida --ink o --card se aclara sola. La zona es la columna central de TODAS las pantallas, el expediente lateral (`.sheet`, que vive fuera de ella) y, desde la vuelta 3, el portal de la persona asegurada (`#portal-aseg`). En la vuelta 1 era sólo Programa, con un :has() sobre la pestaña abierta; la vuelta 2 (28/09/2026) lo quitó. Va en @media screen: al papel no llega nada de esto, y el bloque de impresión de arriba sigue mandando. LO MIDE `probar_colores_portal.py`, que lee cada tema por su rótulo («TEMA claro», «TEMA bosque»): no se cambia un color de aquí sin correrlo. ============================================================================ */ @media screen{ /* TEMA claro */ .app > .main, .sheet, #portal-aseg, #inicio, #cargando, #portal-fz, #demo-barra, #vercomo-barra{ --bg: #F6F4EE; --card: #FAFBF8; --card-border: #D9DFD8; --card-blur: none; --campo: #FAFBF8; --shadow: 0 1px 2px rgba(21,34,28,.05), 0 8px 24px rgba(21,34,28,.06); --ink: #15221C; --soft: #55645B; --mut: #55645B; --num: #15221C; --line: #D9DFD8; --grid: #D9DFD8; /* El verde del portal sobre claro: #4ADE80 como texto da 1.6:1 sobre papel. Éste es el mismo verde, oscurecido: 5.24:1 sobre papel, 5.55:1 sobre blanco, y la letra blanca encima 5.77:1. */ --accent: #16753B; --accent-ink: #FFFFFF; --wash: rgba(22,117,59,.10); /* La paleta de datos en claro es la de PAPEL (validada sobre blanco), salvo GMM y bajas: el olivo y el terracota de papel son el MISMO color con protanopia (dE 2.9; en papel está aceptado, en pantalla nunca lo estuvo). Barridos juntos con todas las condiciones (probar_colores_portal.py): GMM #00503C, el verde bosque, y bajas #8C2814, un ladrillo que se sigue leyendo como alerta; el par más cercano queda en dE 11.1. El salmón #E58A6E sobre claro no pasa como texto: se queda para lo oscuro. */ --c-gmm: #00503C; --c-vida: #B08A3C; --c-dental: #5E54C8; --c-conversion: #1C93A0; --c-ap: #E1197A; --c-baja: #8C2814; --c-gmm-txt: color-mix(in srgb, var(--c-gmm) 60%, var(--ink)); --c-vida-txt: color-mix(in srgb, var(--c-vida) 60%, var(--ink)); --c-dental-txt: color-mix(in srgb, var(--c-dental) 60%, var(--ink)); --c-conversion-txt: color-mix(in srgb, var(--c-conversion) 60%, var(--ink)); --c-ap-txt: color-mix(in srgb, var(--c-ap) 60%, var(--ink)); --c-baja-txt: color-mix(in srgb, var(--c-baja) 60%, var(--ink)); --vida-wash: color-mix(in srgb, var(--c-vida) 16%, transparent); --vida-line: color-mix(in srgb, var(--c-vida) 32%, transparent); --baja-wash: color-mix(in srgb, var(--c-baja) 14%, transparent); background: var(--rma-papel); color: var(--ink); } /* TEMA bosque · DESDE EL 20/10/2026 (rediseño 2b2, parte c2) ES OPT-IN: las tarjetas de pólizas y de cifras son claras, como en Figma («tarjetas blancas con borde»), y sólo una pieza que lleve la clase `tema-bosque` vuelve al oscuro. Antes eran todas las `.pcard` y `.kpi` del área clara. Las tarjetas de cifras dentro del área clara vuelven al oscuro, en bosque. Toman las copias de :root (--osc-*) y cambian sólo lo que el bosque pide, medido contra #16332A: · --mut: el de pantalla da 4.01:1 sobre bosque; el suave del sitio, 6.82; · la tinta de los badges pasa de 70% a 55% del color: con 70% GMM daba 4.02:1, AP 4.24 y Dental 4.49; con 55% el más bajo es GMM, 4.95. */ .app > .main .tema-bosque, .sheet .tema-bosque{ --card: #16332A; --campo: #16332A; --card-border: var(--rma-linea-d); --shadow: var(--rma-sombra); --ink: var(--osc-ink); --soft: #A9BCB1; --mut: #A9BCB1; --num: var(--osc-num); --line: var(--osc-line); --grid: var(--osc-grid); --accent: var(--osc-accent); --accent-ink: var(--osc-accent-ink); --wash: var(--osc-wash); --c-gmm: var(--osc-c-gmm); --c-vida: var(--osc-c-vida); --c-dental: var(--osc-c-dental); --c-conversion: var(--osc-c-conversion); --c-ap: var(--osc-c-ap); --c-baja: var(--osc-c-baja); --c-gmm-txt: color-mix(in srgb, var(--c-gmm) 55%, var(--ink)); --c-vida-txt: color-mix(in srgb, var(--c-vida) 55%, var(--ink)); --c-dental-txt: color-mix(in srgb, var(--c-dental) 55%, var(--ink)); --c-conversion-txt: color-mix(in srgb, var(--c-conversion) 55%, var(--ink)); --c-ap-txt: color-mix(in srgb, var(--c-ap) 55%, var(--ink)); --c-baja-txt: color-mix(in srgb, var(--c-baja) 55%, var(--ink)); --vida-wash: color-mix(in srgb, var(--c-vida) 16%, transparent); --vida-line: color-mix(in srgb, var(--c-vida) 32%, transparent); --baja-wash: color-mix(in srgb, var(--c-baja) 14%, transparent); color: var(--ink); } }