/* Los roles de la ISLA con los valores de Play Jump Park (Saltia).
   La isla es del producto y pinta con roles `--isla-*` (`resources/js/isla/isla.css` del producto, con valores
   neutros); aquí van los de esta marca, que son exactamente los que el diseño escribía a mano en su
   `ParkIsland.jsx`. Se carga DESPUÉS de `saltia.css`, que es de donde salen `--snow`, `--volt-500`… */
:root {
    --isla-sobre: var(--snow);
    --isla-tinta: var(--ink-900);
    --isla-vivo: var(--volt-500);
    --isla-alerta: var(--flare-500);
    --isla-alerta-texto: var(--flare-400);
    --isla-foco: var(--aqua-400);
    --isla-sombra: 0 18px 44px -18px rgba(9, 46, 74, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --isla-velo: rgba(9, 46, 74, 0.44);
    --isla-borde-alerta: rgba(255, 143, 77, 0.5);
    --isla-aviso-fondo: rgba(182, 232, 15, 0.14);
    --isla-aviso-borde: rgba(182, 232, 15, 0.35);
    --isla-destacado-fondo: rgba(182, 232, 15, 0.12);
    --isla-destacado-fondo-hover: rgba(182, 232, 15, 0.2);
    --isla-punto-borde: rgba(11, 46, 74, 0.92);
    /* Las piezas de la compra (T3b): los colores que sus componentes escribían con la paleta del parque. */
    --isla-obligatorio: var(--flare-600);
    --isla-franja-peligro: repeating-linear-gradient(135deg, var(--danger-500) 0 9px, var(--ink-900) 9px 18px);
    --isla-especial: var(--sun-500);
    --isla-error-fondo: rgba(255, 106, 19, 0.18);
    --isla-fiesta-1: var(--aqua-500);
    --isla-fiesta-2: var(--volt-500);
    --isla-fiesta-3: var(--sun-500);
    --isla-fiesta-4: var(--berry-500);
    /* El botón inverso de Mi cuenta (`Button` `inverse` del diseño: blanco sobre la tinta, y su hover). */
    --isla-inverso-fondo: var(--snow);
    --isla-inverso-fondo-hover: var(--ink-100);
    --isla-inverso-texto: var(--ink-900);
    --isla-qr-fondo: var(--snow);
    --isla-qr-tinta: var(--ink-900);
    --isla-qr-sombra: 0 1px 2px rgba(11, 46, 74, 0.12);
    /* El día que no se puede elegir del calendario de la calculadora (T4d): el gris que el diseño escribía. */
    --isla-dia-apagado: var(--ink-400);
    /* El ADORNO por evento (`#988` del producto): los colores que pinta `temporadas.jsx` del diseño. Sin naranja: es la acción. */
    --isla-adorno-1: var(--aqua-400);
    --isla-adorno-2: var(--sun-500);
    --isla-adorno-3: var(--berry-400);
    --isla-adorno-4: var(--volt-500);
    --isla-adorno-luz: var(--volt-400);
    --isla-adorno-cable: var(--volt-700);
    --isla-adorno-hilo: var(--ink-600);
    --isla-adorno-cordel: var(--ink-500);
    --isla-adorno-claro: var(--snow);
    --isla-adorno-oscuro: var(--ink-900);
    --isla-adorno-brillo: rgba(255, 196, 0, 0.5);
    --isla-adorno-punta: var(--aqua-600);
    --isla-adorno-madera: var(--sun-100);
    --isla-adorno-metal: var(--ink-300);
}