Caso integrador: paleta centralizada en :root

CAT-27 mostró que un diseño responsive tiene valores repetidos en muchos lugares: el mismo color de acento en botones, bordes y enlaces; el mismo clamp() para tipografía fluida en varios encabezados. Custom properties resuelven eso: centralizar todos esos valores en :root para que un solo cambio actualice todo el diseño.

---

Los tres casos de uso más comunes

Paleta de colores:

:root {
  --color-primario: #2563eb;
  --color-secundario: #7c3aed;
  --color-texto: #1e293b;
  --color-fondo: #f8fafc;
}

Cambiar --color-primario actualiza botones, enlaces, bordes activos — todo lo que usa esa variable. Sin custom properties habría que buscar y reemplazar el hex en todo el archivo.

Espaciado:

:root {
  --espacio-s: 0.5rem;
  --espacio-m: 1rem;
  --espacio-l: 2rem;
}

Un sistema de espaciado consistente. Si el diseño cambia la escala base, se edita :root.

Tipografía — y la conexión con CAT-27:

:root {
  --fs-titulo: clamp(1.5rem, 4vw, 2.5rem);  /* escala con el viewport */
  --fs-base: 1rem;
  --fw-bold: 700;
}

h1 { font-size: var(--fs-titulo); }
h2 { font-size: var(--fs-titulo); }  /* mismo token, mismo resultado */

Declarar el clamp() en una variable lo convierte en un token reutilizable. Si hay cinco títulos con la misma tipografía fluida, cambiar la escala significa editar una sola línea en :root.

---

La motivación central: un cambio, todo cambia

:root { --color-primario: royalblue; }

Todos los elementos que usan var(--color-primario) — botones, enlaces, bordes, íconos — actualizan su color al instante. Eso es imposible de lograr sin custom properties (habría que buscar y reemplazar el valor en cada regla) o requeriría un preprocesador como Sass.

---

Nota sobre el validador y las longitudes

El validador confirma las declaraciones de las variables (--espacio: 1.5rem → se verifica el token exacto) y los valores resueltos de las propiedades de color (background-color, color). Las longitudes aplicadas vía var() no se validan por el valor resuelto porque el navegador las computa a píxeles (1.5rem → 24px) — por eso el check de --espacio verifica la declaración en :root, no el padding computado. El efecto del espaciado se confirma visualmente en el preview.

---

Hacia CAT-29 (Transitions) — el último módulo

Con el CSS organizado y centralizado — paleta en :root, variantes por scope local — agregar transiciones es el paso natural: un transition: background-color 0.2s ease sobre elementos que ya usan var() anima cualquier cambio de valor suavemente. CAT-29 hace que el CSS ya organizado cobre vida. Con ese módulo completás el recorrido HTML/CSS.

---

Tu turno: declarar la paleta en :root y aplicar cada variable donde corresponde. Un cambio en los valores de :root actualizará todo el componente de una vez.