/* Tema del ecosistema: sólo variables. Es el archivo que se copia a cada app para compartir paleta, letra, radios y curvas de movimiento sin cargar nada de otro origen. Paleta y easings salen del uikit de Plantillas: oscuro casi negro, superficies apenas más claras, violeta como acento. Se resuelve así: oscuro por defecto si el sistema lo pide y el usuario no ha forzado "claro", claro en caso contrario, y forzado por data-tema en . */ :root { --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fuente-mono: 'JetBrains Mono', ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; /* Tema claro */ --fondo: #f4f4f8; --superficie: #ffffff; --superficie-2: #ededf3; --linea: rgb(20 20 40 / 0.08); --linea-fuerte: rgb(20 20 40 / 0.16); --tinta: #14141c; --tinta-suave: #62626f; --tinta-tenue: #9a9aa8; --acento: #6a5cff; --acento-2: #e35dff; --acento-tinta: #ffffff; --acento-suave: rgb(106 92 255 / 0.12); --acento-borde: rgb(106 92 255 / 0.28); --bien: #0f9b74; --bien-suave: rgb(15 155 116 / 0.12); --mal: #d92b53; --mal-suave: rgb(217 43 83 / 0.12); --aviso: #b98600; --aviso-suave: rgb(185 134 0 / 0.14); --neutro: #9a9aa8; --neutro-suave: rgb(20 20 40 / 0.06); /* Degradado por app: cada tarjeta lo redefine desde JS con su propio acento. */ --acento-a: var(--acento); --acento-b: var(--acento-2); /* Marco del icono según la luz del glifo. "initial" deja la variable inválida y el uso cae al degradado normal. */ --marco-glifo-oscuro: initial; --marco-glifo-claro: #16161c; --ambiente-1: rgb(106 92 255 / 0.18); --ambiente-2: rgb(227 93 255 / 0.12); --cristal: rgb(244 244 248 / 0.78); --radio: 16px; --radio-pequeno: 10px; --radio-pildora: 100px; --sombra: 0 1px 2px rgb(20 20 40 / 0.05), 0 12px 32px -16px rgb(20 20 40 / 0.18); --sombra-alta: 0 24px 64px -24px rgb(20 20 40 / 0.35); --sombra-foco: 0 0 0 3px var(--acento-borde); /* Curvas: salida fuerte para entradas y hovers, muelle para lo juguetón, cajón para lo que desliza. */ --facil-salida: cubic-bezier(0.23, 1, 0.32, 1); --facil-dentro-fuera: cubic-bezier(0.77, 0, 0.175, 1); --facil-muelle: cubic-bezier(0.34, 1.56, 0.64, 1); --facil-cajon: cubic-bezier(0.32, 0.72, 0, 1); --rapido: 160ms; --medio: 240ms; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fondo: #060608; --superficie: #0e0e12; --superficie-2: #16161c; --linea: rgb(255 255 255 / 0.07); --linea-fuerte: rgb(255 255 255 / 0.13); --tinta: #f0f0f4; --tinta-suave: #8c8c9c; --tinta-tenue: #5c5c6b; --acento: #7c6fff; --acento-2: #ff6fff; --acento-tinta: #ffffff; --acento-suave: rgb(124 111 255 / 0.14); --acento-borde: rgb(124 111 255 / 0.4); --bien: #22d3a0; --bien-suave: rgb(34 211 160 / 0.14); --mal: #ff4466; --mal-suave: rgb(255 68 102 / 0.14); --aviso: #ffc44d; --aviso-suave: rgb(255 196 77 / 0.14); --neutro: #5c5c6b; --neutro-suave: rgb(255 255 255 / 0.06); --marco-glifo-oscuro: #f0f0f4; --marco-glifo-claro: initial; --ambiente-1: rgb(124 111 255 / 0.16); --ambiente-2: rgb(255 111 255 / 0.1); --cristal: rgb(6 6 8 / 0.72); --sombra: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 48px -20px rgb(0 0 0 / 0.6); --sombra-alta: 0 32px 80px rgb(0 0 0 / 0.5); color-scheme: dark; } } :root[data-tema="oscuro"] { --fondo: #060608; --superficie: #0e0e12; --superficie-2: #16161c; --linea: rgb(255 255 255 / 0.07); --linea-fuerte: rgb(255 255 255 / 0.13); --tinta: #f0f0f4; --tinta-suave: #8c8c9c; --tinta-tenue: #5c5c6b; --acento: #7c6fff; --acento-2: #ff6fff; --acento-tinta: #ffffff; --acento-suave: rgb(124 111 255 / 0.14); --acento-borde: rgb(124 111 255 / 0.4); --bien: #22d3a0; --bien-suave: rgb(34 211 160 / 0.14); --mal: #ff4466; --mal-suave: rgb(255 68 102 / 0.14); --aviso: #ffc44d; --aviso-suave: rgb(255 196 77 / 0.14); --neutro: #5c5c6b; --neutro-suave: rgb(255 255 255 / 0.06); --marco-glifo-oscuro: #f0f0f4; --marco-glifo-claro: initial; --ambiente-1: rgb(124 111 255 / 0.16); --ambiente-2: rgb(255 111 255 / 0.1); --cristal: rgb(6 6 8 / 0.72); --sombra: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 48px -20px rgb(0 0 0 / 0.6); --sombra-alta: 0 32px 80px rgb(0 0 0 / 0.5); color-scheme: dark; }