/* ========================================================================== Doisol — Design tokens Colour values are fixed by the brand manual. Do not add a fifth colour: emphasis comes from surface saturation, weight and scale, never from a new hue. ========================================================================== */ /* --- Fuentes -------------------------------------------------------------- WOFF2 primero, el original después. El navegador se queda con el primer formato que entiende, así que los modernos nunca descargan el OTF y los viejos siguen viendo la marca. -------------------------------------------------------------------------- */ @font-face { font-family: 'Zalando Sans Expanded'; src: url('../assets/fuentes/ZalandoSansExpanded-VariableFont_wght.woff2') format('woff2'), url('../assets/fuentes/ZalandoSansExpanded-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue Doisol'; src: url('../assets/fuentes/HelveticaNeueRoman.woff2') format('woff2'), url('../assets/fuentes/HelveticaNeueRoman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue Doisol'; src: url('../assets/fuentes/HelveticaNeueMedium.woff2') format('woff2'), url('../assets/fuentes/HelveticaNeueMedium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue Doisol'; src: url('../assets/fuentes/HelveticaNeueBold.woff2') format('woff2'), url('../assets/fuentes/HelveticaNeueBold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- Brand palette: the only four colours that exist ------------------ */ --azul: #0047BA; /* PANTONE 2728 C — línea Nómina */ --morado: #655DC6; /* PANTONE 2725 C — línea Gestión Humana */ --azul-oscuro: #001E61; /* PANTONE 2758 C — tinta y profundidad */ --azul-claro: #ABC8E7; /* PANTONE 277 C — apoyo, nunca texto pequeño */ --blanco: #FFFFFF; /* Derived neutrals. Tinted toward the brand's own hue, never toward warm. */ --superficie: #F4F7FC; --borde: #D8E2F2; --tinta: var(--azul-oscuro); --tinta-suave: #45537E; /* --- Line accent ----------------------------------------------------- Set per page on . Every component reads --linea instead of hardcoding a hue, so a page cannot leak the other line's colour. Mixing or gradient-blending the two is forbidden by the product architecture manual. */ --linea: var(--azul); --linea-profunda: var(--azul-oscuro); /* --- Type ------------------------------------------------------------- */ --fuente-display: 'Zalando Sans Expanded', 'Helvetica Neue Doisol', system-ui, sans-serif; --fuente-texto: 'Helvetica Neue Doisol', system-ui, -apple-system, sans-serif; /* Modular scale, ratio 1.25, fluid between 380px and 1400px viewports. */ --t-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); --t-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-md: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --t-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); --t-xl: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); --t-2xl: clamp(2.5rem, 1.8rem + 3.1vw, 4.75rem); /* --- Space ------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: clamp(4rem, 3rem + 5vw, 7rem); --s-10: clamp(5rem, 3.5rem + 7vw, 9.5rem); --ancho: 1240px; --ancho-texto: 68ch; /* --- Radius: restrained. Cards top out at 12px. ----------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* --- Motion ----------------------------------------------------------- Custom curves only. The built-in CSS easings are too weak to read as intentional, and `ease-in` is never used on UI: it delays the first moment, which is exactly when the eye is watching. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-presion: 140ms; /* button press feedback */ --dur-rapida: 180ms; /* routine state change */ --dur-media: 260ms; /* dropdowns, panels */ --dur-lenta: 480ms; /* authored entrance */ --dur-nav: 520ms; /* la contracción de la barra: gesto grande, tiempo largo */ /* --- Z-index: semantic scale, never arbitrary values ------------------ */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-backdrop: 300; --z-modal: 400; } /* Talento Humano flips the line accent. Nothing else changes. `--linea-profunda` stays on the brand purple: the palette has no dark purple, and deriving one alters the brand. Depth on this line comes from texture, photography and space, never from an invented tone. */ [data-linea='talento'] { --linea: var(--morado); --linea-profunda: var(--morado); }