/* ============================================================ tokens.css — base de diseño Se copia en TODO proyecto nuevo antes de escribir cualquier CSS. Reemplaza los defaults de Tailwind / del navegador por un sistema propio. CÓMO USARLO 1. Copiar este archivo al proyecto e importarlo PRIMERO 2. Editar SOLO el bloque "POR PROYECTO" de abajo 3. No tocar el resto salvo que haya razón ============================================================ */ /* ------------------------------------------------------------ 1. POR PROYECTO ← lo único que se cambia en cada web ------------------------------------------------------------ */ :root { /* El hue que gobierna TODA la paleta. Un solo número. rojo 28 · terracota 45 · ámbar 75 · oliva 120 · verde 155 cian 200 · azul 260 · violeta 295 · rosa 350 */ --h: 45; /* Chroma del acento: .10 sobrio · .16 normal · .22 saturado */ --c-acento: 0.15; /* Tipografías (ver catálogo en diseno.md — NO usar Inter/Poppins/Montserrat) */ --f-display: "Fraunces", Georgia, serif; --f-texto: "Switzer", system-ui, sans-serif; --f-mono: "Geist Mono", ui-monospace, monospace; /* Radio: 0 para brutalista/editorial · .5rem contenido · 1.5rem+ orgánico */ --radio: 0px; /* Intensidad del grano: 0 lo apaga, .035 es el default, .06 es fuerte */ --grano: 0.035; } /* ------------------------------------------------------------ 2. COLOR — derivado del hue. Ningún neutro es gris puro. ------------------------------------------------------------ */ :root { --acento: oklch(58% var(--c-acento) var(--h)); --acento-suave: oklch(72% calc(var(--c-acento) * 0.5) var(--h)); --fondo: oklch(97% 0.012 var(--h)); /* casi blanco, tibio */ --fondo-alt: oklch(93% 0.018 var(--h)); /* secciones alternas */ --texto: oklch(21% 0.020 var(--h)); /* casi negro, mismo hue */ --texto-suave: oklch(21% 0.020 var(--h) / 0.62); /* Hairlines — reemplazan a las sombras */ --linea: oklch(21% 0.02 var(--h) / 0.12); --linea-fuerte: oklch(21% 0.02 var(--h) / 0.28); } /* Variante oscura: se activa poniendo data-tema="oscuro" en */ :root[data-tema="oscuro"] { --fondo: oklch(17% 0.015 var(--h)); --fondo-alt: oklch(22% 0.020 var(--h)); --texto: oklch(94% 0.010 var(--h)); --texto-suave: oklch(94% 0.010 var(--h) / 0.62); --linea: oklch(94% 0.01 var(--h) / 0.14); --linea-fuerte: oklch(94% 0.01 var(--h) / 0.30); --acento: oklch(72% var(--c-acento) var(--h)); } /* ------------------------------------------------------------ 3. TIPOGRAFÍA — contraste alto de escala (≥5:1 display/body) ------------------------------------------------------------ */ :root { --t-display: clamp(2.75rem, 9vw, 7.5rem); --t-h1: clamp(2rem, 5vw, 3.5rem); --t-h2: clamp(1.5rem, 3vw, 2.25rem); --t-h3: 1.25rem; --t-body: 1.0625rem; /* 17px lee mejor que 16 */ --t-small: 0.875rem; --t-label: 0.75rem; --tr-display: -0.035em; /* tracking: apretado en lo grande */ --tr-titulo: -0.02em; --tr-label: 0.14em; /* abierto en lo chico */ } /* ------------------------------------------------------------ 4. ESPACIO — secciones generosas, contenedores variables ------------------------------------------------------------ */ :root { --s-seccion: clamp(5rem, 12vw, 12rem); /* padding vertical de sección */ --s-borde: clamp(1.25rem, 5vw, 4rem); /* margen lateral */ --ancho-angosto: 42rem; /* texto largo */ --ancho-normal: 72rem; /* default */ --ancho-amplio: 88rem; /* galerías, tablas */ /* full-bleed = sin contenedor. ALTERNAR entre secciones. */ } /* ------------------------------------------------------------ 5. MOVIMIENTO — la curva importa más que la duración ------------------------------------------------------------ */ :root { --ease-suave: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, premium */ --ease-entrada: cubic-bezier(0.32, 0.72, 0, 1); --dur-rapida: 180ms; --dur-media: 420ms; --dur-lenta: 900ms; } /* ------------------------------------------------------------ 6. BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; letter-spacing: var(--tr-titulo); text-wrap: balance; margin: 0; } p { max-width: 62ch; /* medida de lectura */ text-wrap: pretty; margin: 0 0 1.2em; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } img, video, svg { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } ::selection { background: var(--acento); color: var(--fondo); } /* ------------------------------------------------------------ 7. PATRONES — las clases que reemplazan a los defaults ------------------------------------------------------------ */ /* Display: el título grande de cada página */ .display { font-family: var(--f-display); font-size: var(--t-display); line-height: 0.95; letter-spacing: var(--tr-display); text-wrap: balance; } /* Label: el contrapeso chico. Metadata, numeración, categorías. */ .etiqueta { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--texto-suave); } /* Sección con el aire obligatorio */ .seccion { padding: var(--s-seccion) var(--s-borde); } .contenedor { max-width: var(--ancho-normal); margin-inline: auto; } .contenedor--angosto { max-width: var(--ancho-angosto); margin-inline: auto; } .contenedor--amplio { max-width: var(--ancho-amplio); margin-inline: auto; } /* Hairline — sustituye a box-shadow */ .linea { border: 1px solid var(--linea); } .linea-top { border-top: 1px solid var(--linea); } /* Grilla base de 12 columnas, para poder romperla a propósito */ .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-borde); } /* Reveal escalonado: agregar .reveal y --i:0,1,2... a los hijos */ .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 70ms), transform var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 70ms); } .reveal.visible { opacity: 1; transform: none; } /* ------------------------------------------------------------ 8. GRANO — mata el aspecto digital plano. Siempre activo. ------------------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grano); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ 9. ACCESIBILIDAD ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------ 10. PUENTE A TAILWIND v4 Si el proyecto usa Tailwind v4, descomentar este bloque en el CSS principal para que las utilidades usen ESTOS tokens y no los defaults de Tailwind (que son los que delatan el template). ------------------------------------------------------------ */ /* @theme { --color-fondo: var(--fondo); --color-fondo-alt: var(--fondo-alt); --color-texto: var(--texto); --color-acento: var(--acento); --color-linea: var(--linea); --font-display: var(--f-display); --font-sans: var(--f-texto); --font-mono: var(--f-mono); --radius-base: var(--radio); --ease-suave: cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } */