/* ============================================================ MZ — Design System · TOKENS Única fuente de verdad. Ningún otro archivo define un valor crudo de color, tamaño o espacio: todos leen de acá. ============================================================ */ :root{ /* -------------------------------------------------------- 1. COLOR Rampa neutra de 8 pasos. El sistema es acromático a propósito: el color entra sólo por las fotos de obra. No agregar acentos — si algo necesita destacarse, se resuelve con peso tipográfico, aire o una línea. -------------------------------------------------------- */ --n-0: #ffffff; /* papel */ --n-05: #fafafa; /* lavado — hover de celda */ --n-10: #f2f2f2; /* superficie vacía — marco de embed sin cargar */ --n-20: #dcdcdc; /* filete interno, dentro de un bloque */ --n-40: #bcbcbc; /* deshabilitado / "pendiente" */ --n-60: #8f8f8f; /* secundario — etiquetas, pies, metadatos */ --n-80: #4a4a4a; /* texto corrido */ --n-100: #292929; /* tinta — títulos y líneas estructurales */ /* Tres peldaños que sólo existen para el modo oscuro. En claro el papel es el extremo de la rampa, pero al invertir hace falta algo MÁS oscuro que la tinta para que el lavado y la superficie vacía sigan siendo un paso corto y no un salto. */ --n-110: #242424; /* superficie vacía sobre tinta */ --n-115: #1d1d1d; /* lavado sobre tinta */ --n-120: #171717; /* papel en oscuro */ /* semánticos: usar SIEMPRE estos, no la rampa directamente */ --c-paper: var(--n-0); --c-text: var(--n-100); --c-text-body: var(--n-80); --c-text-mute: var(--n-60); --c-text-disabled: var(--n-40); /* Línea estructural. Bajó de n-100 a n-80: a tinta plena las reglas de región y los bordes de la retícula competían con el contenido —en oscuro, un enrejado casi blanco sobre negro—. Sigue siendo la línea fuerte del sistema, sólo que no grita. Si todavía es mucho, el próximo escalón es n-60 (y n-40 en oscuro, su espejo). */ --c-rule: var(--n-80); /* línea estructural: divide regiones */ --c-rule-soft: var(--n-20); /* filete: divide filas dentro de un bloque */ --c-surface-hover: var(--n-05); --c-surface-empty: var(--n-10); /* -------------------------------------------------------- 2. TIPOGRAFÍA Una familia, dos pesos. 300 para todo lo que se lee, 400 sólo para la capa utilitaria en versalitas. Nunca negrita, nunca itálica salvo títulos de obra citados. -------------------------------------------------------- */ --font-sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif; /* Siguen siendo DOS pesos, como manda el principio. Lo que cambió es cuál es el segundo: la capa utilitaria pasó de 400 a 500, así que TODAS las versalitas ganan presencia a la vez y no hay que hacerle una excepción al encabezado de sección. Si el 500 resulta tosco, se vuelve a 400 en esta sola línea. */ --w-light: 300; /* texto de lectura y titulares */ --w-regular: 500; /* capa utilitaria: .lbl, .tag, realces en tabla */ /* escala */ --t-label: 10px; /* versalitas, la capa utilitaria */ --t-micro: 12px; /* subtítulo de track */ --t-meta: 12.5px; /* tablas de datos */ --t-small: 13px; /* listas de enlaces */ --t-small-plus: 13.5px; /* subtítulos, bullets */ --t-body: 14.5px; /* texto corrido */ --t-base: 15px; /* UI por defecto */ --t-title: 17px; /* título de celda en la retícula */ --t-name: 22px; /* la marca en el rail, un renglón */ --t-section: 16px; /* encabezado de región */ --t-section-sm: 13px; /* el dato al margen derecho */ --t-bio: clamp(16px, 1.35vw, 18px); /* la bio, en un solo cuerpo */ --t-lead: clamp(19px, 1.9vw, 24px); /* entrada de bio */ --t-display-sm: clamp(21px, 3vw, 36px); /* email de contacto */ --t-display: clamp(28px, 4.2vw, 52px); /* título de obra en la ficha */ /* interlínea */ --lh-display: 1.05; --lh-tight: 1.15; --lh-snug: 1.25; --lh-lead: 1.4; --lh-label: 1.4; --lh-base: 1.6; --lh-prose: 1.6; /* prosa: el ancho de medida importa tanto como el cuerpo */ --measure-lead: 36ch; --measure-prose: 64ch; --measure-aside: 52ch; /* tracking */ --tr-display: -.03em; --tr-lead: -.015em; --tr-title: -.015em; --tr-mail: -.025em; --tr-name: -.01em; --tr-base: 0; --tr-label: .16em; /* el encabezado va más chico de tracking: a 16px, .16em separa tanto las letras que "02 — WORKS" deja de leerse como una unidad */ --tr-section: .1em; /* -------------------------------------------------------- 3. ESPACIO Base 4px. Los dos valores fluidos son los que sostienen el ritmo de la página; el resto son ajustes locales. -------------------------------------------------------- */ --s-05: 2px; /* medio paso: sólo para separar items de una misma lista */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 26px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-section: clamp(56px, 6.5vw, 104px); /* aire arriba del encabezado de región */ --s-gutter: clamp(18px, 2.4vw, 32px); /* padding de celda, barra y sección */ --s-block: clamp(28px, 4vw, 56px); /* aire interno de un bloque de texto */ --s-region: clamp(34px, 5vw, 64px); /* aire de una región (cabecera de ficha) */ /* -------------------------------------------------------- 4. TRAZO Y FORMA Radio cero en todo el sistema. La estructura se lee por líneas, no por sombras ni cajas redondeadas. -------------------------------------------------------- */ --bw: 1px; --radius: 0; --shadow: none; /* -------------------------------------------------------- 5. RETÍCULA -------------------------------------------------------- */ --rail-w: 196px; /* ancho de la barra lateral fija */ --grid-min: 310px; /* mínimo de celda antes de reflujo */ --split: 1.55fr 1fr; /* la división editorial recurrente */ --bar-h: 60px; /* alto de la barra de la ficha */ /* -------------------------------------------------------- 6. MOVIMIENTO Discreto. Nada rebota, nada llama la atención. -------------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .18s; --dur: .3s; --dur-slow: .6s; /* -------------------------------------------------------- 7. CAPAS -------------------------------------------------------- */ --z-rail: 60; --z-detail: 70; --z-bar: 5; /* punto de quiebre único: por debajo, todo pasa a una columna */ --bp-lap: 900px; } /* ============================================================ MODO OSCURO No es una paleta nueva: es la MISMA rampa leída al revés. Cada token semántico apunta a su espejo, así que todo lo que se construyó pensando en "tinta sobre papel" sigue siendo cierto — sólo que ahora el papel es la tinta. n-0 ↔ n-120 n-40 ↔ n-60 n-05 ↔ n-115 n-60 ↔ n-40 n-10 ↔ n-110 n-80 ↔ n-20 n-20 ↔ n-80 n-100 ↔ n-10 Se aplica SÓLO con [data-theme="dark"] en , nunca por prefers-color-scheme a secas. Una página que no cargue theme.js se queda en claro y no cambia sola bajo los pies del visitante. ============================================================ */ :root[data-theme="dark"]{ --c-paper: var(--n-120); --c-text: var(--n-10); --c-text-body: var(--n-20); --c-text-mute: var(--n-40); --c-text-disabled: var(--n-60); --c-rule: var(--n-20); /* espejo de n-80 */ --c-rule-soft: var(--n-80); --c-surface-hover: var(--n-115); --c-surface-empty: var(--n-110); color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light } @media (prefers-reduced-motion: reduce){ :root{ --dur-fast:0s; --dur:0s; --dur-slow:0s; } }