:root {
    /* Paleta - un solo hilo de color a partir del principal que se pidió
       (#8190F0 = oklch(68.34% 0.1421 275.28)): TODO lo que antes tenía un
       matiz distinto (fondo, tarjetas, texto) comparte exactamente ese
       mismo matiz (275.28°), variando solo luminosidad y croma - así nada
       puede "no combinar" entre sí, es literalmente la misma familia de
       color en distintos tonos. Los saltos de luminosidad/croma entre
       roles (fondo -> tarjeta -> tarjeta_interna, base -> base_clara) son
       deliberadamente más grandes que los que usa gyabeauty entre los
       suyos - ahí la separación entre roles la daba en parte el cambio de
       matiz (que acá no existe, es un solo hilo), así que hace falta más
       distancia en luminosidad/croma para que una tarjeta, su borde y los
       botones que tiene arriba se sigan distinguiendo entre sí (un primer
       intento calcando los deltas exactos de gyabeauty quedó demasiado
       plano en tema claro). importante/mal/bien siguen sin depender del
       matiz principal (en gyabeauty tampoco dependían de él - son los
       semánticos universales de advertencia/error/éxito), se trajeron tal
       cual de ahí. */
    --blanco: #ffffff;
    --negro: #000000;

    --fondo: oklch(95% 0.02 275.28);

    --base_clara: oklch(88% 0.05 275.28);
    --base: oklch(68.34% 0.1421 275.28);
    --base_oscura: oklch(24% 0.045 275.28);
    --base_clara_transparente: oklch(88% 0.05 275.28 / 0.5);
    --base_oscura_transparente: oklch(24% 0.045 275.28 / 0.5);

    --tarjeta: oklch(78% 0.05 275.28);
    --borde_tarjeta: oklch(65% 0.06 275.28);

    --tarjeta_interna: oklch(99% 0.015 275.28);
    --borde_tarjeta_interna: oklch(80% 0.03 275.28);

    --importante: oklch(65% 0.13 90);
    --importante_fondo: oklch(96% 0.03 95);

    --mal: oklch(55% 0.16 25);
    --mal_fondo: oklch(85% 0.09 25);

    --bien: oklch(50% 0.13 150);
    --bien_fondo: oklch(88% 0.14 150);

    --texto: oklch(15% 0.02 275.28);
    --texto_menor_enfasis: oklch(48% 0.02 275.28);
    --texto_fondo: oklch(99% 0.015 275.28);

    /*Fuente*/
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    /* 1rem, no 1.4rem: toda la librería de componentes (paddings, radios,
       tipografía) está calibrada en rem sobre esta base - subirla escala
       todo el resto del sitio ~40% de más. */
    font-size: 1rem;
}

/* Variables para el Tema Oscuro - mismo hilo de color (275.28°) en todos
   los roles, mismo criterio que gyabeauty para invertir base_clara/
   base_oscura entre sí y para subir la luminosidad de --base sobre fondo
   oscuro. */
[data-theme="dark"] {
    --fondo: oklch(17% 0.02 275.28);

    --base_clara: oklch(24% 0.045 275.28);
    --base: oklch(76% 0.135 275.28);
    --base_oscura: oklch(92% 0.04 275.28);
    --base_clara_transparente: oklch(24% 0.045 275.28 / 0.5);
    --base_oscura_transparente: oklch(92% 0.04 275.28 / 0.5);

    --tarjeta: oklch(20% 0.025 275.28);
    --borde_tarjeta: oklch(20% 0.025 275.28);

    --tarjeta_interna: oklch(25% 0.03 275.28);
    --borde_tarjeta_interna: oklch(32% 0.03 275.28);

    --importante: oklch(85% 0.14 95);
    --importante_fondo: oklch(45% 0.1 90);

    --mal: oklch(65% 0.16 25);
    --mal_fondo: oklch(30% 0.08 25);

    --bien: oklch(68% 0.14 150);
    --bien_fondo: oklch(26% 0.07 150);

    --texto: oklch(95% 0.01 275.28);
    --texto_menor_enfasis: oklch(65% 0.012 275.28);
    --texto_fondo: oklch(15% 0.025 275.28);
}

/* En tema claro, --texto_menor_enfasis (gris) casi no contrasta sobre el
   tono de .tarjeta - sí contrasta bien sobre el blanco de tarjeta_interna,
   así que se oscurece solo cuando está directo sobre .tarjeta, sin tocar
   la variable global (no afecta tarjeta_interna ni el tema oscuro). */
:root:not([data-theme="dark"]) .tarjeta {
    --texto_menor_enfasis: oklch(28% 0.02 275.28);
}

:root:not([data-theme="dark"]) .tarjeta .tarjeta,
:root:not([data-theme="dark"]) .tarjeta-interna {
    --texto_menor_enfasis: oklch(56% 0.012 275.28);
}