/* ============================================================ EspaZIP Design System — Tokens (colors + type) ============================================================ */ /* Fonts are loaded via tags in each page's for earliest possible loading */ :root { /* Brand */ --tp-blue: #2733C7; --tp-blue-deep: #1F2AAE; --tp-blue-700: #3441D6; --tp-blue-500: #4C58E2; --tp-blue-300: #8C95EE; --tp-blue-100: #D6D9F7; --tp-blue-050: #EEF0FB; --tp-orange: #F26A1F; --tp-orange-deep: #D85710; --tp-orange-500: #FF7A2E; --tp-orange-300: #FFA871; --tp-orange-100: #FFE2D0; --tp-orange-050: #FFF1E7; /* Neutrals */ --tp-white: #FFFFFF; --tp-paper: #F7F8FB; --tp-paper-2: #EEF0F4; --tp-line: #E2E5EE; --tp-line-strong: #C9CEDB; --tp-ink-3: #6E7493; --tp-ink-2: #3D4360; --tp-ink-1: #1B1F3A; /* Type */ --tp-font-display: "Fredoka", "Nunito", system-ui, sans-serif; --tp-font-body: "Nunito", system-ui, sans-serif; --tp-fs-hero: 56px; --tp-fs-h1: 44px; --tp-fs-h2: 32px; --tp-fs-h3: 24px; --tp-fs-h4: 20px; --tp-fs-body: 16px; --tp-fs-small: 14px; --tp-fs-micro: 12px; --tp-lh-tight: 1.1; --tp-lh-snug: 1.25; --tp-lh-normal: 1.45; /* Spacing */ --tp-s-1: 4px; --tp-s-2: 8px; --tp-s-3: 12px; --tp-s-4: 16px; --tp-s-5: 20px; --tp-s-6: 24px; --tp-s-8: 32px; --tp-s-10: 40px; --tp-s-12: 48px; --tp-s-16: 64px; --tp-s-20: 80px; --tp-s-24: 96px; /* Radii */ --tp-r-xs: 6px; --tp-r-sm: 10px; --tp-r-md: 16px; --tp-r-lg: 24px; --tp-r-xl: 32px; --tp-r-pill: 999px; /* Shadows */ --tp-shadow-card: 0 1px 2px rgba(27, 31, 58, 0.04), 0 8px 24px rgba(27, 31, 58, 0.06); --tp-shadow-pop: 0 12px 32px rgba(39, 51, 199, 0.18); --tp-shadow-btn: 0 4px 14px rgba(242, 106, 31, 0.35); /* Motion */ --tp-ease: cubic-bezier(.2,.7,.2,1); --tp-ease-out: cubic-bezier(.16,.84,.32,1); --tp-dur-fast: 140ms; --tp-dur-base: 220ms; --tp-dur-slow: 420ms; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--tp-white); color: var(--tp-ink-1); font-family: var(--tp-font-body); font-size: var(--tp-fs-body); line-height: var(--tp-lh-normal); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--tp-blue); text-decoration: none; transition: opacity var(--tp-dur-fast) var(--tp-ease); } a:hover { opacity: .75; }