/* ========================================================================== TOKENS DE DISEÑO — compartidos por el sitio publico y el administrador ========================================================================== Forma, espacio, tipografia y movimiento. Es la unica escala del proyecto: la usan public/skins/page/css/ y public/skins/administracion/css/, y por eso vive aca arriba y no dentro de una de las dos. Se carga PRIMERO en los cuatro layouts (sitio, panel, login, generador), antes que cualquier otra hoja, para que todas puedan escribir var(--space-4) sin importar el orden en que se descarguen. Lo que NO esta aca es el color. Cada capa tiene el suyo y son sistemas distintos a proposito: - el sitio publico la paleta editable en /administracion/paleta (--color-*, --header-*, --footer-*), que resuelve claro/oscuro y que el layout emite inline - el administrador sus propios tokens (--bg, --surface, --text-*), que no se administran La unica variable de color que este archivo menciona es --color-sombra, y la menciona con fallback: las tres sombras se construyen sobre ella para que un fondo oscuro reciba una sombra mas negra en vez de una que no se ve. Cada capa declara la suya. Regla de uso, igual para los cuatro grupos: si un componente nuevo "necesita" un valor que no esta en la escala, casi siempre lo que necesita es el escalon de al lado, o resolverlo por otro eje (peso en vez de tamaño, espacio en vez de sombra). Un noveno tamaño de letra o una cuarta sombra son la forma en la que esto se vuelve a desarmar. Ver DESIGN.md (seccion 3) y AUDIT-CSS.md. ========================================================================== */ :root { /* --- Espaciado: escala base 4px --------------------------------------- Reemplaza a los ~60 padding/margin sueltos que habia. La mayor parte del sitio vive entre --space-3 y --space-6; los dos ultimos son para separar secciones enteras, no para separar cosas dentro de una tarjeta. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- Tipografia ------------------------------------------------------- Escala modular de razon ~1.2. Ocho tamaños para todo el sitio: si hace falta un noveno, la jerarquia se esta resolviendo con tamaño donde corresponde peso o espacio. La familia es "Open Sans" y no se le suma una segunda: una sola familia bien jerarquizada se lee mas seria que un par display + texto elegido por contraste. */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.5rem; --font-size-xl: 2rem; --font-size-2xl: 2.5rem; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Los titulos van en semibold, no en bold ni en 800. El peso extra no suma jerarquia cuando el tamaño ya la da: suma ruido, y es una de las cosas que hacen que una pagina se lea como plantilla. */ --line-height-tight: 1.25; --line-height-base: 1.5; /* Para parrafos largos (descripciones, cuerpo del modal), donde 1.5 aprieta. */ --line-height-relaxed: 1.7; /* --- Radios ----------------------------------------------------------- Cuatro. El radio marca jerarquia: chico para lo que se llena (inputs, etiquetas), medio para lo que se aprieta (botones), grande para lo que contiene (tarjetas, paneles). Redondear todo igual es justo lo que borra esa diferencia. El CSS del sitio ademas define --radio-card y --dsn-radio como alias de --radius-lg (ver page/css/global.css): son los nombres viejos, que siguen referenciados en las hojas de los diseños y de los sliders. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* --- Elevacion -------------------------------------------------------- Tres niveles, construidos sobre --color-sombra, que ya es parte de la paleta y ya resuelve claro/oscuro (un rgba(0,0,0,…) fijo desaparece sobre un fondo casi negro). Cuando usar cada uno: sm separacion minima — un desplegable, un input con foco md una tarjeta que reacciona al mouse, mientras el mouse esta encima lg algo que flota de verdad: un modal En reposo una tarjeta NO lleva sombra: lleva un borde de 1px. La sombra identica bajo cada caja es lo que hace que una grilla de tarjetas se lea como plantilla en vez de como una jerarquia. */ --shadow-sm: 0 1px 3px var(--color-sombra, rgba(0, 0, 0, .12)); --shadow-md: 0 4px 12px var(--color-sombra, rgba(0, 0, 0, .12)); --shadow-lg: 0 10px 24px var(--color-sombra, rgba(0, 0, 0, .12)); /* --- Movimiento ------------------------------------------------------- Antes convivian .15 .18 .2 .22 .25 .3 .35 .4s para la misma clase de cambio. Dos duraciones alcanzan: rapida para color y foco, base para transformaciones y sombras. Lo unico que puede pasarse de ahi son los zoom de imagen de fondo, donde el recorrido es mucho mayor. Toda animacion nueva se apaga bajo prefers-reduced-motion. */ --duration-fast: 150ms; --duration-base: 200ms; /* Solo para recorridos largos: el revelado al entrar en pantalla, donde el elemento viaja 24px en vez de los 2 o 3 de un hover. A 200ms ese viaje se lee como un salto; a 400ms se lee como que la pagina acompaña al lector. No es la duracion por defecto de nada: un boton o un menu que tarde 400ms esta roto. */ --duration-slow: 400ms; /* Dos curvas, y la diferencia no es cosmetica: --ease-standard simetrica: entra y sale al mismo ritmo. Es la de lo que CAMBIA sin aparecer ni irse — un color al pasar el mouse, un borde al enfocar, algo que se desplaza de A a B. --ease-out arranca de golpe y frena al final. Es la de lo que APARECE o DESAPARECE: una pagina que entra, un panel que se abre. Con la misma duracion se siente mas rapida, porque el movimiento grande ya paso cuando el ojo llega a mirarlo. La simetrica no sirve para entrar: la primera mitad de la curva la gasta acelerando, justo en el momento que el visitante esta esperando. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* --- Breakpoints ------------------------------------------------------ No se pueden usar dentro de @media, asi que estan aca como referencia y como unica respuesta valida a "¿en que ancho corto?": 576px movil grande → @media (max-width: 575.98px) 768px tablet → @media (max-width: 767.98px) 992px escritorio → @media (max-width: 991.98px) Cualquier otro numero (480, 560, 900, 1199.98…) es un caso puntual que ya se resolvio moviendolo al escalon mas cercano. */ }