/* Canal Cero — Design Tokens (canónicos)
Fuente de verdad (2026-07-23): el MOCKUP RENDERIZADO "Home Canal Cero"
del proyecto de diseño "Canal Cero Growth Homepage" (Claude Design MCP,
proyecto 21ec57cf-…). Es la maqueta visual APROBADA y reemplaza a
colors_and_type.css. Valores canónicos: verde #3DEDB4, fondos
#0A0A0F / #101016 / #14121F, Montserrat.
⚠️ = legacy 2024 / design-time (Figma): se conservan a propósito;
se decide su poda con evidencia al construir las secciones. */
:root {
/* ── Marca · Violeta ── */
--cc-violet-500: #603DE7;
--cc-violet-600: #4B2FBF; /* mockup growth (era #442ABA, cambio 2026-07-23) */
--cc-violet-700: #3E26B1;
--cc-violet-900: #302A60;
--cc-violet-950: #2A254F;
--cc-violet-ink: #201E2C;
--cc-violet-100: #BAAEE7;
--cc-violet-200: #D4CAFF;
--cc-violet-300: #9747FF; /* ⚠️ design-time (Figma dashed-frame indicator) */
--cc-violet-400: #7B61FF; /* ⚠️ design-time (outline) */
/* ── Marca · Verde (acento primario) ── */
--cc-green-300: #A3FFE3;
--cc-green-400: #59F0BA;
--cc-green-500: #3DEDB4; /* mockup growth (era #0BE5A2, cambio 2026-07-23) */
/* ⚠️ El MISMO verde, descompuesto en canales, y el duplicado es a regañadientes: CSS no
sabe partir un hex en componentes, y hay hojas de terceros —Gravity Forms— que piden el
triplete para componer un `rgba(var(--x), .65)`. Se puso el 2026-08-27 porque sin él el
contorno del selector de país seguía saliendo en el AZUL DE FÁBRICA de GF (`#204ce5`)
aunque su `--gf-color-primary` ya fuera nuestro (8.114). Vive pegado a su hex a
propósito: si alguien cambia uno y no el otro, se ve — y es lo único que se puede hacer
con un valor que el lenguaje obliga a escribir dos veces. */
--cc-green-500-rgb: 61, 237, 180;
--cc-green-700: #08AA7A; /* verde oscuro (hover/estados); formalizado 2026-07-21 desde la paleta Bricks "Color #7" */
--cc-green-200: #ADEFDB;
/* Verde para TEXTO sobre fondo claro (modo claro, 2026-08-03).
El acento de marca es un verde claro: #3DEDB4 sobre blanco da 1.50:1 y
#08AA7A da 2.98:1 — los dos por debajo del 4.5:1 que WCAG 1.4.3 pide para
texto. Este valor es el MISMO tono (160.6°) y saturación del verde de marca,
oscurecido hasta pasar con margen: 5.34:1 sobre #FFFFFF y 5.08:1 sobre
#F9F9F9. No se eligió el primer paso que pasaba (#0D8760, 4.51:1 sobre
blanco) porque cae a 4.29:1 sobre paper: pasar por 0.01 no es pasar (§7).
Solo para texto e iconos. Como FONDO de botón sigue mandando --cc-green-500,
que con texto #0A0A0F encima da 13.14:1 en cualquier tema. */
--cc-green-ink: #067A57;
/* ── Color por unidad de negocio (2026-08-04) ──────────────────────────────
Las cuatro capacidades ya se llaman Canal.Media / .Commerce / .Data / .Brand y
el punto viaja marcado en el markup (`Canal.Media`),
pero las cuatro se pintaban del MISMO verde. Darle un color a cada una era la
pieza de identidad más barata que había: no inventa vocabulario, le da sentido a
una estructura que ya existía y que estaba desperdiciada.
Cada unidad son DOS valores, por la razón de `--cc-green-ink`: un color vívido
sobre fondo oscuro no puede pasar 4.5:1 sobre blanco, y al revés. El sufijo
`-ink` es el del tema claro.
Los ocho valores están MEDIDOS, no elegidos a ojo (ver la tabla de abajo). El
criterio no fue igualar el contraste —hacerlo deja violeta y magenta en pastel,
porque a 13:1 esos tonos ya están lavados— sino mantener saturación ALTA y la
luminosidad mínima que pase con margen: el ojo lee "familia" por saturación y
luminosidad, no por ratio de contraste.
⚠️ El fondo que MANDA es el más claro de todos, y no es ninguno de los tres
obvios: es la TARJETA (blanco al 6%) sobre la superficie, o sea `#2A2837`. La
primera calibración verificó contra el fondo base, la superficie y el violeta —
los tres declarados— y se olvidó del compuesto donde el acento realmente vive en
la home. Resultado: Commerce y Brand pasaban en `/servicios/` con 5.57 y 5.58, y
en la home caían a **4.08:1**, bajo el mínimo. Lo cazó el chequeo nuevo de
`home.mjs`, que compone el alfa (8.15.3), no la revisión de los valores.
Los dos se subieron un paso de luminosidad hasta pasar sobre ese fondo con margen;
Media y Data ya lo hacían de sobra.
| unidad | oscuro | card/surf/viol/ink | croma | claro | blanco/paper |
|----------------|---------|-------------------------|-------|---------|--------------|
| Media (marca) | #3DEDB4 | 9.62/11.35/10.89/13.14 | 176 | #067A57 | 5.34 / 4.62 |
| Commerce | #BA75FF | 4.86/ 5.75/ 5.51/ 6.66 | 138 | #5E00BD | 9.50 / 8.50 |
| Data | #3AC4EE | 7.10/ 8.38/ 8.03/ 9.70 | 180 | #0D7494 | 5.33 / 4.60 |
| Brand | #F062A4 | 4.81/ 5.68/ 5.44/ 6.57 | 142 | #CF146B | 5.30 / 4.57 |
Media reusa el verde de marca y su tinta: la unidad de medios ES el acento de la
marca, así que estrenar un quinto color ahí habría sido inventar por simetría.
Commerce sale del violeta de marca aclarado — el #603DE7 tal cual da 3.12:1 sobre
el fondo y NO sirve para texto, que es justo la trampa de 8.25.1 (el mismo hex
sirve de fondo de banda y no de tinta).
⚠️ RECALIBRACIÓN 2026-08-09 — Commerce: #9F83F1 → #BA75FF · ink #4517CF → #5E00BD.
Commerce y Brand tenían la fila de contrastes IDÉNTICA (4.81/5.68/5.45/6.57) y aun así
Brand se veía y Commerce se leía gris: el viejo tenía croma 110 contra 142 y 180. La
calibración anterior igualó el eje que medía y dejó suelto el que manda — el que este
mismo bloque declara. Por eso el croma ya está en la tabla: lo que no se mide, se
descalibra. El valor nuevo sube a 138 sin bajar el contraste en ninguno de los cuatro
fondos. Tope en tono 270: más allá se va a magenta y le compite a Brand (332), y los
180 de Data son inalcanzables sin caer bajo AA. La tinta clara sigue el mismo tono.
`cc-hero-viz.js` repite los cuatro hex como RESPALDO (lee estos tokens con
`getComputedStyle`); actualizarlo junto con esta tabla. */
--cc-u-media: var(--cc-green-500);
--cc-u-media-ink: var(--cc-green-ink);
--cc-u-commerce: #BA75FF;
--cc-u-commerce-ink: #5E00BD;
--cc-u-data: #3AC4EE;
--cc-u-data-ink: #0D7494;
--cc-u-brand: #F062A4;
--cc-u-brand-ink: #CF146B;
/* ── Sky ── */
--cc-sky-500: #3AA6D4;
/* ── Neutros ── */
--cc-white: #FFFFFF;
--cc-paper: #F9F9F9;
/* Segundo papel, para la MISMA función que --cc-ink-800 en oscuro. #F9F9F9 sobre
blanco da 1.053, o sea invisible; este da 1.158. Con él las cards blancas
también se separan de su sección (mismo 1.158) en vez de flotar. */
--cc-paper-2: #EEEEF1;
--cc-paper-blue: #D8E7ED;
--cc-gray-100: #D9D9D9;
--cc-gray-200: #C4C4C4;
--cc-gray-300: #BDBDBD;
--cc-gray-400: #939393;
--cc-gray-500: #807E92;
--cc-gray-600: #656565;
--cc-gray-700: #5A5A5A;
--cc-ink-500: #44434E;
--cc-ink-700: #333333;
/* Superficie de sección y de card. Subió de #14121F a #1C1A2A el 2026-08-03:
contra la base #0A0A0F el valor anterior daba **1.069** de contraste y el ojo
separa dos superficies planas recién cerca de 1.10–1.15, así que las dos
"bandas" de la home no aportaban ritmo — la página se leía como un solo campo
con dos eventos de color. Ahora da **1.157**. Se conserva el matiz (249°) y la
saturación del original, así que no cambia la identidad, solo la separación.
Verificado que el texto sigue pasando AA encima: #898989 da 4.88:1 y
#C6C6CE da 10.05:1. */
--cc-ink-800: #1C1A2A;
--cc-ink-900: #0A0A0F; /* fondo principal — mockup (era #191919, 2026-07-23) */
--cc-ink-950: #161616;
--cc-ink-925: #101016; /* banda oscura — mockup (era #1E1E1E, 2026-07-23) */
--cc-ink-915: #262626;
--cc-ink-905: #0D0D0D;
--cc-ink-meta: #898989;
--cc-black: #000000;
/* ── Semánticos ── */
--cc-bg: var(--cc-ink-900);
--cc-bg-deep: var(--cc-ink-905);
--cc-bg-band: var(--cc-ink-925);
--cc-bg-light: var(--cc-white);
--cc-bg-surface: var(--cc-ink-800);
--cc-bg-contact: var(--cc-violet-ink);
--cc-bg-impulse: var(--cc-violet-600);
--cc-bg-brand: var(--cc-violet-500); /* ⚠️ legacy 2024 — evitar */
--cc-bg-accent: var(--cc-sky-500); /* ⚠️ legacy */
--cc-fg: var(--cc-white);
--cc-fg-on-light: var(--cc-ink-500);
--cc-fg-strong: var(--cc-white);
--cc-fg-muted: var(--cc-ink-meta);
--cc-fg-on-brand: var(--cc-white);
--cc-fg-on-dark: var(--cc-white);
--cc-fg-link: var(--cc-green-500);
--cc-fg-accent: var(--cc-green-500);
--cc-fg-mint: var(--cc-green-200);
--cc-border: var(--cc-border-ctrl-on-dark);
--cc-border-soft: rgba(147,147,147,0.33);
--cc-divider: var(--cc-gray-200);
--cc-focus-ring: rgba(96,61,231,0.35);
/* ── Gradientes ── */
--cc-grad-violet: linear-gradient(180deg, var(--cc-violet-500) 0%, var(--cc-violet-700) 100%); /* ⚠️ legacy 2024 */
--cc-grad-hero: linear-gradient(180deg, var(--cc-violet-500) 0%, var(--cc-violet-700) 100%); /* ⚠️ legacy 2024 */
--cc-grad-burst: repeating-conic-gradient(from 0deg at 72% 48%, rgba(58,166,212,0) 0deg, rgba(58,166,212,0.5) 0.9deg, rgba(61,237,180,0.28) 2deg, rgba(0,0,0,0) 3.2deg);
--cc-grad-glass: linear-gradient(180deg, rgba(255,255,255,0.33) 0%, rgba(255,255,255,0.21) 100%);
/* ── Tipografía ── */
--cc-font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--cc-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--cc-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--cc-fw-regular: 400;
--cc-fw-medium: 500;
--cc-fw-semibold: 600;
--cc-fw-bold: 700;
--cc-fw-extrabold: 800;
--cc-fs-page-title: 87px;
--cc-fs-display: 80px;
--cc-fs-h1: 60px;
--cc-fs-h2: 45px;
--cc-fs-h3: 41px;
--cc-fs-h4: 29px;
--cc-fs-conect: 57px;
--cc-fs-lg: 22px;
--cc-fs-md: 20px;
--cc-fs-base: 18px;
--cc-fs-sm: 16px;
--cc-fs-xs: 14px;
--cc-fs-card: 15.75px;
--cc-fs-xxs: 12px;
--cc-fs-tiny: 10px;
--cc-lh-tight: 1.0;
--cc-lh-snug: 1.15;
--cc-lh-normal: 1.35;
--cc-lh-relaxed: 1.5;
--cc-tracking-tight: -0.01em;
--cc-tracking-normal: 0;
--cc-tracking-wide: 0.06em;
/* ── Escala de display del rediseño (2026-07-30) ──
La auditoría visual midió NUEVE tamaños de titular entre 44px y 80px
(80/68/64/56/52/48/46/44). Nadie distingue 46 de 48; lo que sí se nota es
que no hay sistema. La causa es la de siempre (gotcha 8.18): la escala de
arriba (`--cc-fs-h1/h2/h3`) es la del diseño ANTERIOR y no cubre el rango
display del rediseño, así que cada `_cssCustom` se inventó su propio clamp.
Estos tres pasos son ese tramo faltante. Guardan una razón de ~1.23 entre
sí, que es el salto mínimo para que dos niveles se lean como distintos.
El `min` de cada clamp es el tamaño a 320px y el `max` el de 1440px. */
--cc-fs-d1: clamp(38px, 6vw, 80px); /* hero */
--cc-fs-d2: clamp(34px, 5vw, 64px); /* apertura mayor de sección */
--cc-fs-d3: clamp(30px, 4.2vw, 52px); /* título de sección */
/* Leads. Había 21/20/19px para el MISMO rol (bajada de titular), con cuatro
interlineados distintos (1.5/1.55/1.6/1.6). Un solo paso. */
--cc-fs-lead: clamp(17px, 2vw, 20px);
--cc-lh-lead: 1.6;
/* ── Spacing ── */
--cc-space-1: 4px;
--cc-space-2: 8px;
--cc-space-3: 12px;
--cc-space-4: 16px;
--cc-space-5: 20px;
--cc-space-6: 24px;
--cc-space-7: 32px;
--cc-space-8: 40px;
--cc-space-9: 48px;
--cc-space-10: 64px;
--cc-space-11: 80px;
--cc-space-12: 120px;
/* Ritmo vertical de sección (2026-07-30).
Antes: SIETE de once secciones con `padding: clamp(90px,12vw,150px)` arriba
y abajo. Con todas las secciones separadas por lo mismo, el espaciado deja
de ser jerarquía y la página se lee como una lista plana. Tres niveles:
`sm` para los respiros, `md` para las secciones de contenido y `lg` para
los tres momentos que sí deben pesar (el pivote, la banda de métricas y el
cierre). La escala es la que ya existía en `--cc-space-*`, extendida a
fluida. */
/* RECORTADOS UN ESCALÓN el 2026-08-31, a pedido del equipo. Los valores anteriores eran
sm clamp(56px,7vw,88px) · md clamp(72px,9vw,112px) · lg clamp(96px,12vw,152px).
⚠️ Y CONVIENE SABER LO QUE ESTE CAMBIO NO ARREGLA, porque se midió antes de aplicarlo
(gotcha 8.136). El feedback era «el recorrido de la portada se hace largo». El recorte
entero compra **−3,9 % en escritorio y −2,0 % en móvil**:
MÓVIL 10.480 → 10.272 px (12,4 → 12,2 pantallas)
ESCRITORIO 7.714 → 7.410 px ( 8,6 → 8,2 pantallas)
La razón es que solo 7 de las 9 secciones de la portada usan estos tokens, y los
rellenos más grandes quedan fuera: los 216px de `sec035` —que NO son aire, son la
reserva de su decoración de líneas—, los 158 de `sec020` y el 96/120 del hero. Lo que
alarga la portada es el CONTENIDO: 11 secciones, cinco de ellas el 72 % del recorrido.
Se aplica porque el aire sobraba de todos modos en escritorio (era el 28,6 % de la
página), no porque resuelva la queja.
⚠️ Y EL ALCANCE NO ES LA PORTADA: estos tres tokens gobiernan **80 rellenos de sección
en 8 piezas versionadas** —`home`, `servicios`, sus 4 hijas viejas, `contacto` y
`agencia-seo`—. Un cambio aquí las acorta todas, que es lo coherente, pero no es un
ajuste local.
Se remide con: `node tools/lab/medir-ritmo.mjs` (acepta `CC_RUTA=`). */
--cc-sec-sm: clamp(48px, 6vw, 72px);
--cc-sec-md: clamp(56px, 7vw, 88px);
--cc-sec-lg: clamp(72px, 9vw, 120px);
--cc-gutter-desktop: 190px;
--cc-gutter-mobile: 22px;
--cc-container: 1060px;
--cc-canvas-2025: 1440px;
--cc-canvas-legacy: 1920px; /* ⚠️ legacy 1920 */
/* ── Radii ── */
--cc-radius-xs: 4px;
--cc-radius-sm: 6px;
--cc-radius-md: 12px;
--cc-radius-lg: 18px;
--cc-radius-xl: 24px;
--cc-radius-pill: 999px;
/* ── Sombras ── */
--cc-shadow-search: 0px 14px 24px 0px rgba(0,0,0,0.05);
--cc-shadow-card: 3px 9px 22px -2px rgba(165,158,192,0.40);
--cc-shadow-card-dark: 0 14px 30px -10px rgba(0,0,0,0.6); /* elevación de cards sobre fondo oscuro (rediseño growth) */
--cc-shadow-soft: 0px 8px 24px 0px rgba(147,147,147,0.33);
--cc-shadow-overlay: 0px 24px 48px -8px rgba(9,9,9,0.13);
/* ── Efectos ── */
--cc-blur-glass: blur(80px);
--cc-blur-soft: blur(24px);
/* ── Motion ── */
--cc-ease: cubic-bezier(.4, 0, .2, 1);
--cc-ease-out: cubic-bezier(0, 0, .2, 1);
--cc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--cc-dur-instant: 100ms;
--cc-dur-fast: 180ms;
--cc-dur-base: 240ms;
--cc-dur-slow: 400ms;
/* Tramo de ENTRADA de contenido (scroll-reveals, cascadas, trazos y el crossfade
del hero). Se añadió el 2026-07-29: el sistema de movimiento venía usando 520,
560, 600 y 620ms a mano, cuatro valores indistinguibles entre sí y ninguno en la
escala. Ahora es uno. La escala termina en 400ms para INTERACCIÓN (respuesta al
puntero); una entrada necesita más aire, y por eso es un tramo aparte y no un
`--cc-dur-slower`. */
--cc-dur-reveal: 560ms;
/* Alto del header. Medido de 320 a 1920px de ancho el 2026-08-03: son 85px en
LOS ONCE anchos (desde que el menú móvil lo dejó en una sola fila, 8.19), así
que es un valor del sistema y no una estimación. Lo usan el `scroll-padding`
de las anclas y el `top` del índice de la nota, que sin él quedan debajo del
header pegado. */
--cc-header-h: 85px;
/* ── Z-index ── */
--cc-z-header: 60;
--cc-z-chat: 70;
--cc-z-modal: 80;
/* ── Blog · lectura (single post — rediseño 2026-07-24) ──
Del mockup "Blog Canal Cero" (pieza 1b, dark). Valores propios de la
nota que la home no necesita; los colores se toman de los semánticos
de arriba (verde #3DEDB4, fondos #0A0A0F/#14121F), NO de los hex
viejos del mockup (#0BE5A2/#191919). */
--cc-measure: 700px; /* ancho de la columna de lectura */
--cc-toc-rail: 280px; /* riel del índice (TOC) en desktop */
--cc-read-gap: 80px; /* separación columna ↔ TOC */
/* Cuerpo sobre superficie oscura. Va en dos pasos porque el modo claro
redefine `--cc-fg-read`, y las superficies que se quedan oscuras (banda
violeta, cierre, caja CTA) necesitan recuperar ESTE valor dentro de su
subárbol sin volver a escribir el hex. */
--cc-fg-read-on-dark: #C6C6CE;
--cc-fg-read: var(--cc-fg-read-on-dark);
/* Mismo desdoblamiento y por la misma razón que `--cc-fg-read`: el modo claro
redefine `--cc-border-on-dark`, así que una isla oscura necesita poder recuperar
el hairline claro-sobre-oscuro sin repetir el rgba. Costó el bug de las redes del
footer (8.25.8): la isla devolvía los colores de TEXTO pero no los de SUPERFICIE. */
--cc-hairline-on-dark: rgba(255,255,255,0.08);
--cc-border-on-dark: var(--cc-hairline-on-dark); /* hairline de cards/código en dark */
--cc-rule-on-dark: rgba(255,255,255,0.10); /* reglas/divisores en dark */
/* Y el MISMO desdoblamiento para el borde de CONTROL —el de un campo de formulario,
que es más fuerte que un hairline porque tiene que decir dónde se puede escribir—.
Lo pidió el formulario de la portada el 2026-08-27: vive en `#brxe-sec127`, isla
oscura en los dos temas, y en claro sus campos recibían `rgba(32,30,44,0.18)` sobre
una superficie oscura, o sea se quedaban sin canto (8.114). */
--cc-border-ctrl-on-dark: rgba(165,158,192,0.40);
/* ── La tarjeta y la superficie de campo de Gravity Forms (8.113). Van aquí y no
junto a sus reglas por la razón de siempre: el modo claro las voltea a papel, y una
isla oscura tiene que poder recuperar el valor de dark SIN volver a escribir el rgba.
Son las tres cifras del efecto cristal, medidas sobre la landing del Blend. ── */
--cc-form-superficie-on-dark: rgba(255,255,255,0.07);
--cc-form-tarjeta-on-dark: rgba(255,255,255,0.06);
--cc-form-tarjeta-borde-on-dark: rgba(255,255,255,0.16);
}
/* ══════════════════════════════════════════════════════════════════════════
MODO CLARO (2026-08-03) — pedido por Mauricio Dinamarca en la revisión del
2026-07-30.
El sitio es dark-first y el mockup aprobado es oscuro, así que el tema claro
NO es "el otro diseño": es una re-lectura del mismo sistema con las
superficies invertidas. Tres decisiones de fondo:
1. **Los tonos de MARCA no cambian.** El verde, los violetas y el negro de
marca son los mismos hex en los dos temas. Lo que cambia son los tokens
SEMÁNTICOS (qué es fondo, qué es texto) y solo eso. Un tema que redefine
los hues es una segunda identidad, no un modo.
2. **Casi todos los valores salen del vocabulario que ya existía.** §7 dice
que los 84 tokens sin usar son el vocabulario del sistema y no cruft:
esto es exactamente para lo que estaban. El único color nuevo en todo el
tema es `--cc-green-ink`, y existe por una razón medida (ver su comentario).
3. **Las superficies oscuras DELIBERADAS se quedan oscuras**: la banda
violeta de métricas, el cierre violeta-ink y los bloques de código. No son
"fondo", son piezas con color propio, y en claro siguen leyéndose como
acento. Por eso el texto blanco que vive sobre ellas no se toca (las
excepciones por elemento están en cc-components.css).
Se activa con `data-theme="light"` en , que pone un script inline de
antes del primer pintado (functions.php → ccd_theme_head_guard) y
alterna cc-theme.js. Sin JS el atributo no existe y todo esto queda inerte:
el sitio se ve exactamente como hoy.
══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
/* ── Superficies ── */
--cc-bg: var(--cc-white);
--cc-bg-deep: var(--cc-paper);
--cc-bg-band: var(--cc-paper-2);
--cc-bg-surface: var(--cc-paper-2);
/* `--cc-bg-contact` y `--cc-bg-impulse` (los dos violetas) NO se redefinen a
propósito: ver la decisión 3 de arriba. */
/* ── Texto. Los tres primeros ya existían en el vocabulario y su contraste
está medido sobre las dos superficies claras (blanco y paper):
#44434E → 8.60:1 / 8.17:1 (cuerpo)
#201E2C → 16.36:1 / 15.55:1 (titulares)
#5A5A5A → 6.90:1 / 6.55:1 (atenuado)
`--cc-fg-on-light` se llama así justamente porque se creó para esto. ── */
--cc-fg: var(--cc-fg-on-light);
--cc-fg-strong: var(--cc-violet-ink);
--cc-fg-muted: var(--cc-gray-700);
--cc-fg-read: var(--cc-fg-on-light);
--cc-fg-link: var(--cc-green-ink);
--cc-fg-accent: var(--cc-green-ink);
/* `--cc-fg-on-dark` y `--cc-fg-on-brand` siguen siendo blancos: describen
texto sobre una superficie oscura o de marca, y esas no cambiaron. */
/* ── Hairlines y reglas. El nombre dice "on-dark" porque el sistema nació
dark-first; el PAPEL es el mismo (separar dos superficies casi iguales) y
lo único que cambia es el signo. Renombrarlos obligaría a tocar sus ~20
usos sin ganar nada. ── */
--cc-border-on-dark: rgba(32,30,44,0.14);
--cc-rule-on-dark: rgba(32,30,44,0.16);
--cc-border: rgba(32,30,44,0.18);
--cc-border-soft: rgba(32,30,44,0.12);
/* La sombra de card en dark es negra al 60% y en claro se vería como una
mancha: mismo gesto, opacidad de papel. */
--cc-shadow-card-dark: 0 14px 30px -12px rgba(32,30,44,0.20);
/* ── Paleta de Bricks ──────────────────────────────────────────────────
Los elementos referencian color por ID de paleta y Bricks los rinde como
`var(--bricks-color-)` (§8.3), así que redefinir la variable voltea de
una todos sus usos — sin tocar la BD, sin re-exportar templates y sin
sumar una fila a la tabla de §10. Es lo que hace viable este modo.
Solo se redefinen los TRES ids cuyo uso es exclusivamente superficie o
texto de cuerpo. Medido elemento por elemento en los 5 templates:
· xyartc (#0a0a0f) → 9 usos: 6 fondos de sección + 3 textos de botón.
· fdhndm (#ffffff) → 23 usos, TODOS texto.
· jepxvk (#14121f) → 2 usos, los dos fondos de sección.
Los que NO se tocan y por qué:
· vtjrgr (#3dedb4) es fondo de los 4 botones de marca; oscurecerlo
rompería el 13:1 que dan con su texto #0A0A0F encima.
· qfgzgg (#08aa7a) es el :hover de esos botones (6.9:1, sirve igual).
· kwgdoe (#4b2fbf) es la banda violeta, que se queda oscura.
Los 3 usos de xyartc como texto (los labels de los botones del hero) y los
3 de fdhndm sobre violeta se re-afirman en cc-components.css: son las
únicas excepciones, y están enumeradas ahí una por una. ── */
--bricks-color-xyartc: var(--cc-white);
--bricks-color-fdhndm: var(--cc-violet-ink);
--bricks-color-jepxvk: var(--cc-paper-2);
}