/* ============================================================================ TOKENS.CSS — Fuente única de verdad del sistema de diseño ---------------------------------------------------------------------------- REGLA DE ORO: ningún otro archivo declara colores, tamaños de fuente ni espaciados literales. Todo referencia estas variables. Si querés cambiar la identidad visual del sitio entero, se hace ACÁ. Paleta extraída del sitio en producción (danielmoureai.com): navy profundo casi negro + acento que evoluciona de cálido a frío + serif display. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. COLOR — Superficies Escala de oscuro a claro. `base` es el fondo de página. `surface` son las cards. Nunca uses negro puro (#000): mata la profundidad y el acento pierde intensidad. ------------------------------------------------------------------- */ --c-base: #0a0d16; --c-base-tint: #0c1018; /* bandas alternas de sección */ --c-elevated: #0e121c; /* header translúcido, footer */ --c-surface: #141926; /* cards, paneles */ --c-surface-hover: #1a2030; --c-surface-inset: #0d1119; /* inputs, campos hundidos */ /* Bordes: siempre sutiles. El borde fuerte solo para separadores clave. */ --c-border: #212838; --c-border-strong: #2e3648; --c-border-accent: rgb(var(--c-accent-rgb) / 0.38); /* --------------------------------------------------------------------- 2. COLOR — Acento de marca: "del latido humano al algoritmo consciente" El acento NO es un color fijo. Arranca cálido (el latido: naranja coral) y migra a frío (el algoritmo: violeta y cian) a medida que se baja la página. theme.js reescribe estas variables según el scroll, así que la evolución se ve mientras se lee, sin explicarla. Los valores de acá abajo son el punto de partida cálido y, además, el estado final si el JS no corre: sin JS el sitio queda coherente en el polo cálido, nunca a medio camino. 500 = acento canónico (botones, bordes, líneas de tiempo) 300 = claro (títulos en itálica, números, labels sobre oscuro) 700 = profundo (hover de botón sólido) ------------------------------------------------------------------- */ --c-accent-rgb: 255 106 61; /* fuente de verdad para los alphas */ --c-accent-300: #ffb08c; --c-accent-400: #ff8a5c; --c-accent-500: #ff6a3d; --c-accent-600: #e8512a; --c-accent-700: #c23d1c; --c-accent-glow: rgb(var(--c-accent-rgb) / 0.16); /* Polos fijos: los usan los degradados que tienen que mostrar el viaje completo de una sola vez (el nombre del hero, por ejemplo). No los toca el scroll, porque su gracia es contener las dos puntas juntas. */ --c-warm-500: #ff6a3d; --c-mid-500: #ff3d77; --c-violet-500: #8b7bff; --c-cool-500: #38d0ff; --grad-brand: linear-gradient( 101deg, var(--c-warm-500) 0%, var(--c-mid-500) 38%, var(--c-violet-500) 68%, var(--c-cool-500) 100% ); /* --------------------------------------------------------------------- 3. COLOR — Texto Cuatro niveles. Si necesitás un quinto, probablemente el diseño tiene un problema de jerarquía, no de paleta. ------------------------------------------------------------------- */ --c-text: #eceff5; --c-text-secondary: #b4bccb; --c-text-muted: #8a94a8; --c-text-faint: #5d6678; --c-text-on-accent: #100a08; /* texto sobre el acento sólido */ /* --------------------------------------------------------------------- 4. COLOR — Semántico / utilitario ------------------------------------------------------------------- */ --c-success: #4ec9a0; --c-error: #e06c6c; --c-whatsapp: #25d366; --c-whatsapp-icon: #ffffff; --c-linkedin: #0a66c2; --c-linkedin-icon: #ffffff; --c-focus-ring: var(--c-accent-400); /* Impresión: el sitio se invierte a fondo claro para no gastar tinta */ --c-print-bg: #ffffff; --c-print-text: #000000; --c-print-border: #cccccc; /* --------------------------------------------------------------------- 5. TIPOGRAFÍA — Familias serif → títulos, números grandes, citas. Voz de autoridad. sans → cuerpo, labels, UI. Voz de claridad. mono → citas de sistema tipo "Vemos lo que viene". Se cargan con font-display:swap desde index.html con preconnect. ------------------------------------------------------------------- */ --font-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* --------------------------------------------------------------------- 6. TIPOGRAFÍA — Escala fluida Todo escala con el viewport vía clamp(). Nada de breakpoints para tamaño de texto: el diseño respira solo entre 320px y 1600px. Fórmula: clamp(mínimo, base + vw, máximo) ------------------------------------------------------------------- */ --fs-2xs: clamp(0.65rem, 0.62rem + 0.15vw, 0.72rem); --fs-xs: clamp(0.72rem, 0.69rem + 0.18vw, 0.8rem); --fs-sm: clamp(0.82rem, 0.79rem + 0.2vw, 0.9rem); --fs-base: clamp(0.95rem, 0.91rem + 0.25vw, 1.05rem); --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.18rem); --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --fs-xl: clamp(1.4rem, 1.2rem + 1vw, 2rem); --fs-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.9rem); --fs-3xl: clamp(2.4rem, 1.8rem + 3.2vw, 4.2rem); --fs-4xl: clamp(3rem, 2rem + 5vw, 6rem); /* Interlineado y tracking */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.75; --ls-tight: -0.02em; --ls-wide: 0.06em; --ls-wider: 0.14em; /* labels en mayúscula */ --ls-widest: 0.24em; /* logo, eyebrows */ /* --------------------------------------------------------------------- 7. ESPACIADO — Escala fluida de 8pt Usá siempre estos pasos. Un margin-top:37px es una decisión que nadie va a poder mantener después. ------------------------------------------------------------------- */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --sp-2xl: clamp(3rem, 2rem + 4vw, 5rem); --sp-3xl: clamp(4rem, 2.5rem + 6vw, 8rem); /* Padding vertical de sección: la respiración del sitio */ --section-py: clamp(4rem, 2rem + 7vw, 8.5rem); /* --------------------------------------------------------------------- 8. LAYOUT ------------------------------------------------------------------- */ --container-max: 1200px; --container-pad: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); --measure: 68ch; /* ancho máximo legible de párrafo */ --measure-narrow: 52ch; /* Grid split de 2 columnas — se colapsa solo vía container query */ --split-gap: clamp(2rem, 1rem + 4vw, 4.5rem); /* --------------------------------------------------------------------- 9. BORDES, RADIOS, SOMBRAS Radios chicos: el lenguaje visual es editorial/premium, no SaaS. ------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-accent: 0 0 0 1px var(--c-border-accent), 0 8px 32px var(--c-accent-glow); /* --------------------------------------------------------------------- 10. MOVIMIENTO Todas las duraciones pasan por acá para poder anularlas de golpe en prefers-reduced-motion (ver base.css). ------------------------------------------------------------------- */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 520ms; --dur-reveal: 720ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------------------- 11. CAPAS (z-index) Nombradas para no volver a escribir z-index:9999 nunca más. ------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-float: 1100; /* botón flotante de WhatsApp */ } /* ============================================================================ 12. API DE COMPONENTES ---------------------------------------------------------------------------- Estas variables NO se declaran globalmente a propósito: cada componente las recibe inline para configurarse. Todas tienen un fallback en su regla CSS, así que omitirlas es seguro. Documentadas acá para que sepas qué podés pasarle a cada componente: --item-min .auto-grid ancho mínimo de cada item (default 240px) → lo que hace el grid dinámico: nunca declarás cuántas columnas, declarás el ancho mínimo. --split-cols .split proporción de las 2 columnas (default 1.05fr 0.95fr) --stack-gap .stack separación vertical entre hijos (default --sp-sm) --cluster-gap .cluster separación del grupo horizontal (default --sp-sm) --reveal-delay [data-reveal] retardo de la animación en cascada (default 0ms) --eyebrow-mark-w .eyebrow ancho de la línea previa al label (default 28px) Ejemplo:
…
========================================================================== */ /* ============================================================================ MODO ALTO CONTRASTE — respeta la preferencia del sistema operativo ========================================================================== */ @media (prefers-contrast: more) { :root { --c-text-muted: #a8b2c4; --c-text-faint: #8a94a8; --c-border: #3a4256; --c-border-strong: #4d5670; } }