/* ========================================================================== Design tokens — Carlos Bottaro Arquitecto Copiados de docs/design-system/tokens/ (fonts, colors, typography, spacing, borders, elevation, motion, base). Las familias tipográficas viven acá; los archivos de fuente se cargan con a Google Fonts en el . No editar valores sueltos: si cambia el design system, se vuelve a copiar. ========================================================================== */ /* --- Familias --------------------------------------------------------------- */ :root{ --font-core:"Hanken Grotesk","Museo Sans","Century Gothic",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-display:"Newsreader","Times New Roman",Georgia,serif; --font-mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace; } /* --- Color: escala de grises (no hay color de marca) ---------------------- */ :root{ --white:#FFFFFF; --ink-025:#FAFAFA; --ink-050:#F2F2F2; --ink-100:#E4E4E4; --ink-200:#C9C9C9; --ink-300:#9A9A9A; --ink-400:#7A7A7A; --ink-500:#565656; --ink-600:#3A3A3A; --ink-700:#2B2B2B; --ink-800:#1C1C1C; --ink-900:#0E0E0E; --black:#000000; /* Funcionales — nunca decorativos */ --signal-error:#8A2A2A; --signal-success:#2E5C3E; --signal-info:#33506F; /* Alias semánticos */ --text-primary:var(--ink-900); --text-secondary:var(--ink-500); --text-muted:var(--ink-400); --text-faint:var(--ink-300); --text-inverse:var(--white); --text-inverse-muted:var(--ink-300); --surface-page:var(--white); --surface-raised:var(--white); --surface-muted:var(--ink-050); --surface-photo-placeholder:var(--ink-100); --surface-dark:var(--ink-700); --surface-darkest:var(--black); --surface-field-dark:var(--ink-600); --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-strong:var(--ink-900); --border-on-dark:#3F3F3F; --rule-accent:var(--ink-200); --link-default:var(--ink-900); --link-hover:var(--ink-500); --focus-ring:var(--ink-900); } /* --- Tipografía ---------------------------------------------------------- */ :root{ --fs-display:clamp(2.5rem,4.4vw,4rem); --fs-h1:2.25rem; --fs-h2:1.75rem; --fs-h3:1.25rem; --fs-body-lg:1.125rem; --fs-body:1.0625rem; --fs-body-sm:0.9375rem; --fs-caption:0.8125rem; --fs-micro:0.75rem; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh-tight:1.08; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65; --ls-display:-0.015em; --ls-heading:0.01em; --ls-body:0; --ls-caption:0.1em; --ls-nav:0.06em; --ls-wordmark:0.02em; /* Roles semánticos */ --type-wordmark:var(--fw-bold) var(--fs-h2)/1 var(--font-core); --type-display:var(--fw-semibold) var(--fs-display)/var(--lh-tight) var(--font-display); --type-h1:var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-display); --type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display); --type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-core); --type-body:var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-core); --type-caption:var(--fw-medium) var(--fs-caption)/1.3 var(--font-core); --type-nav:var(--fw-regular) var(--fs-body-sm)/1 var(--font-core); --type-eyebrow-num:var(--fw-semibold) var(--fs-micro)/1 var(--font-mono); } /* --- Espaciado y layout ------------------------------------------------- */ :root{ --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px; --space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px; --space-11:128px;--space-12:176px; --gutter:24px; --container-max:1180px; --container-narrow:760px; --section-y:128px; --section-y-tight:80px; --grid-gap:32px; } /* --- Bordes y radios -------------------------------------------------- */ :root{ --radius-none:0; --radius-sm:6px; /* controles: botones, inputs, chips */ --radius-md:10px; /* fotos y tarjetas */ --border-hairline:1px; --border-emphasis:2px; --rule-width:72px; --rule-thickness:2px; --underline-active:2px; } /* --- Elevación ------------------------------------------------------- */ :root{ --shadow-none:none; --shadow-hairline:0 0 0 1px var(--border-subtle); --shadow-photo:0 1px 2px rgba(14,14,14,.06); --shadow-overlay:0 12px 40px rgba(14,14,14,.14); --overlay-scrim:rgba(14,14,14,.55); --blur-scrim:blur(8px); } /* --- Movimiento ---------------------------------------------------- */ :root{ --ease-standard:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms; --dur-photo:500ms; --transition-color:color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard); } /* --- Base / reset (de tokens/base.css) ---------------------------- */ *,*::before,*::after{box-sizing:border-box} body{ margin:0; background:var(--surface-page); color:var(--text-primary); font:var(--type-body); letter-spacing:var(--ls-body); -webkit-font-smoothing:antialiased; text-wrap:pretty; } h1,h2,h3,h4,p,figure{margin:0} h1{font:var(--type-h1);letter-spacing:var(--ls-heading)} h2{font:var(--type-h2);letter-spacing:var(--ls-heading)} h3{font:var(--type-h3)} img{display:block;max-width:100%} a{color:var(--link-default);text-decoration:none;transition:var(--transition-color)} a:hover{color:var(--link-hover)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:var(--border-emphasis) solid var(--focus-ring);outline-offset:2px} ::selection{background:var(--ink-900);color:var(--white)}