/* ============================================================ Festival Etcétera — CSS BASE (estructura y componentes) Acá NO vive la personalidad visual: todo color, tipografía, radio, borde y sombra sale de tokens. La piel la ponen los temas de temas.css vía [data-tema="..."] en . ============================================================ */ :root { color-scheme: light; /* Lienzo y superficies */ --fondo: #f6f3ea; --fondo-2: #ebe7da; --fondo-textura: none; --fondo-textura-tam: auto; --superficie: #ffffff; --superficie-2: #f1eee4; --superficie-3: #e5e1d2; --campo-fondo: #ffffff; --velo: rgba(20, 20, 28, .55); --nav-fondo: rgba(246, 243, 234, .92); /* Tinta */ --tinta: #15151c; --tinta-2: #4a4a58; --tinta-3: #84848f; /* Bordes */ --borde: rgba(21, 21, 28, .16); --borde-fuerte: rgba(21, 21, 28, .38); --grosor-borde: 1.5px; /* Primario (el azul protagonista de cada tema) */ --primario: #1937c9; --primario-suave: rgba(25, 55, 201, .12); --sobre-primario: #ffffff; /* Acentos y estados (coral=rechazo/calor, ambar=atención, verde=ok, violeta=extra) */ --coral: #c8250f; --coral-suave: rgba(200, 37, 15, .12); --ambar: #9a6a00; --ambar-suave: rgba(240, 165, 5, .16); --verde: #177245; --verde-suave: rgba(23, 114, 69, .13); --violeta: #4936c4; --violeta-suave: rgba(73, 54, 196, .12); --sobre-acento: #ffffff; /* Forma */ --radio: 16px; --radio-chico: 10px; --sombra: 0 10px 30px rgba(21, 21, 28, .12); --sombra-flotante: 0 10px 26px rgba(25, 55, 201, .35); /* Tipografía */ --tipografia: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Métricas */ --alto-nav-inferior: 62px; /* Flecha de los