:root {
    /* Paleta */
    --blanco: #ffffff;
    --negro: #000000;

    --fondo: oklch(96% 0.006 250);

    --base_clara: oklch(92% 0.06 295);
    --base: oklch(58% 0.18 295);
    --base_oscura: oklch(24% 0.05 295);
    --base_clara_transparente: oklch(92% 0.06 295 / 0.5);
    --base_oscura_transparente: oklch(24% 0.05 295 / 0.5);

    --tarjeta: oklch(85% 0.03 285);
    --borde_tarjeta: oklch(85% 0.03 285);

    --tarjeta_interna: oklch(99% 0.003 250);
    --borde_tarjeta_interna: oklch(89% 0.01 250);

    --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(19% 0.012 250);
    --texto_menor_enfasis: oklch(56% 0.01 250);
    --texto_fondo: oklch(99% 0.003 250);

    /* Fuente */
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-size: 1rem;
}

/* Tema oscuro: todo el resto de los componentes se recolorea solo, sin
   tocar ningún .css de componentes — es la idea de esta carpeta. */
[data-theme="dark"] {
    --fondo: oklch(17% 0.015 250);

    --base_clara: oklch(24% 0.05 295);
    --base: oklch(68% 0.16 295);
    --base_oscura: oklch(92% 0.05 295);
    --base_clara_transparente: oklch(24% 0.05 295 / 0.5);
    --base_oscura_transparente: oklch(92% 0.05 295 / 0.5);

    --tarjeta: oklch(20% 0.02 285);
    --borde_tarjeta: oklch(20% 0.02 285);

    --tarjeta_interna: oklch(25% 0.018 250);
    --borde_tarjeta_interna: oklch(32% 0.018 250);

    --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.005 250);
    --texto_menor_enfasis: oklch(65% 0.012 250);
    --texto_fondo: oklch(15% 0.02 250);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); }