/*
 * Puente de tokens de color entre las DOS hojas que cargan las páginas del sitio público.
 *
 * EL PROBLEMA. Estas páginas cargan dos bundles de Tailwind (ver el comentario de
 * `site-blocks/layout.tsx`): el de la app (v4, `app/globals.css`) y la hoja compilada del sitio
 * (`/css/styles.css`, v3.4.17). Las dos definen los MISMOS nombres de variable en `:root` con
 * convenciones INCOMPATIBLES:
 *
 *   · app (v4):   --primary: oklch(0.55 0.22 240)      → un color
 *   · sitio (v3): --primary: 214 90% 46%               → un TRIPLETE, que se consume con hsl()
 *
 * La hoja del sitio carga después y gana el desempate, así que aquí `--primary` vale
 * `214 90% 46%`. Y las utilidades que genera Tailwind v4 leen la variable CRUDA —
 * `.bg-primary\/30 { background-color: color-mix(in oklab, var(--primary) 30%, transparent) }`—,
 * así que reciben tres números donde esperan un color. Entrada inválida: el navegador descarta la
 * declaración entera y no pinta nada.
 *
 * (Ojo, que esto se comprobó a mano y no es lo que parece de lejos: las utilidades NO leen
 * `--color-primary`. `globals.css` mapea `--color-primary: var(--primary)` y Tailwind resuelve ese
 * alias al generar, dejando `var(--primary)` en la regla. Redefinir los `--color-*` no arregla
 * nada — no los lee nadie.)
 *
 * SOLO ROMPE LO QUE EXISTE EN UNA SOLA HOJA. Una clase definida en las DOS —`text-muted-foreground`,
 * `border-border/40`, `bg-muted`, `bg-border`— se pinta bien: la versión de v3 (`hsl(var(--x))`)
 * gana por orden de carga y funciona con tripletes. Las que solo existen en v4 no tienen quien las
 * rescate: `bg-primary/*`, `text-primary`, `bg-background`, `text-foreground`. De ahí que el
 * marcador de HOY del diagrama desapareciera y el punto de fin de barra perdiera su relleno,
 * mientras el resto del diagrama se veía perfecto.
 *
 * LA SOLUCIÓN. Capturar el triplete en un nombre propio en `:root` y, YA DENTRO de `<main>`,
 * redefinir la variable cruda envolviéndolo en `hsl()`. Así los componentes de la app siguen
 * escribiéndose con sus tokens de siempre, sin colores a mano por componente, y sin duplicar la
 * paleta del sitio: si marketing cambia un valor en la hoja, esto lo sigue.
 *
 * POR QUÉ EN `main` Y NO EN `:root`. Dos motivos, y los dos son duros:
 *
 *  1. En `:root` sería un CICLO — `--primary: hsl(var(--x))` con `--x: var(--primary)` sobre el
 *     MISMO elemento se invalida entero. Hace falta un descendiente.
 *  2. `body` tampoco vale: la hoja del sitio pinta `body{background-color:hsl(var(--background))}`,
 *     y redefinir `--background` sobre `body` haría que su propia regla resolviera `hsl(hsl(…))`
 *     y la página perdería el fondo. `<main>` está por debajo, así que la regla de `body` sigue
 *     resolviendo con el triplete.
 *
 * QUÉ NO PONER AQUÍ (importante). Solo entran variables que la hoja del sitio NO consuma DENTRO
 * de `main`. Comprobado una a una:
 *
 *   · --primary          0 usos de hsl(var(--primary)) en toda la hoja → seguro.
 *   · --background       solo `body{…}`, que queda por encima de main → seguro.
 *   · --foreground       ídem, solo `body{…}` → seguro.
 *   · --border           NO: `*{border-color:hsl(var(--border))}` es universal y aplica dentro.
 *   · --muted-foreground NO: `.text-muted-foreground` la usa, y el diagrama va lleno de esa clase.
 *
 * Añadir una de las dos últimas dejaría `hsl(hsl(…))` y rompería justo lo que hoy funciona.
 * Antes de meter una variable nueva, comprueba sus consumidores:
 *
 *   grep -o "[^{};]*{[^}]*hsl(var(--LAVARIABLE))[^}]*}" frontend/public/css/styles.css
 *
 * Se carga SIEMPRE después de `/css/styles.css`, y nunca sin ella: quien pone los tripletes es esa
 * hoja. A solas, esto sería `hsl(oklch(…))` — inválido — y rompería el color en vez de arreglarlo.
 */

/* Captura: aquí `--primary` y compañía todavía valen el triplete de la hoja del sitio. */
:root {
    --akua-site-primary: var(--primary);
    --akua-site-background: var(--background);
    --akua-site-foreground: var(--foreground);
}

/*
 * Reescritura, ya dentro del documento. `/propuestas` no tiene `<main>` y no lo necesita: su vista
 * se pinta con las clases de marca del sitio (`bg-akua-blue`, `text-akua-dark`) y con las que
 * existen en las dos hojas. Si algún día usa una utilidad de v4 con estos tokens, envuélvela en un
 * `<main>` o añade su contenedor a este selector.
 */
main {
    --primary: hsl(var(--akua-site-primary));
    --background: hsl(var(--akua-site-background));
    --foreground: hsl(var(--akua-site-foreground));
}