/* Pro · tokens del sistema visual. ───────────────────────────────────────────────────────────────────────────── La idea de Ana: básico, blanco y negro con un acento rosa bebé, pero MUY versátil. La creadora elige entre varias paletas y CADA UNA SON TRES COLORES que reskinnean el sistema entero. Por eso aquí el color se apoya en solo TRES variables: --tinta la tinta (texto y superficies fuertes) --papel el fondo --acento el color que da el toque (rosa bebé en la original) Todo lo demás —líneas, fondos suaves, texto atenuado, el acento legible como texto— se DERIVA de esas tres con color-mix(). Así una paleta nueva es, de verdad, tres colores y nada más. Y como se derivan de tinta+papel, funcionan igual en una paleta clara que en una oscura (la tinta clara sobre papel oscuro da líneas y textos atenuados correctos sin tocar nada). Tipografía: Inter (interfaz, limpia y de pantalla) + IBM Plex Mono para las etiquetas, los números de sección y las cifras — ese detalle "de dossier" es lo que le da el aire profesional sin atarse a ningún gremio. Ambas OFL. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ---- Los TRES colores de la paleta (la original: negro, blanco, rosa bebé) */ --tinta: #141414; --papel: #ffffff; --acento: #f6c4d2; /* ---- Derivados (no se tocan al cambiar de paleta) ---- Se mezcla tinta sobre papel en distintas proporciones. */ --linea: color-mix(in srgb, var(--tinta) 12%, var(--papel)); /* filetes y bordes */ --suave: color-mix(in srgb, var(--tinta) 4%, var(--papel)); /* fondo de tarjeta / franja */ --tenue: color-mix(in srgb, var(--tinta) 55%, var(--papel)); /* texto secundario */ --media: color-mix(in srgb, var(--tinta) 30%, var(--papel)); /* iconos apagados, filetes fuertes */ /* (Se eliminó `--acento-texto`, el "café": ahora el acento SIEMPRE es el rosa puro; los rótulos pequeños van en gris `--tenue`, no en un tono intermedio.) */ /* Texto SOBRE una superficie de acento. Los acentos son pastel (o neón, claro), así que una tinta oscura fija contrasta siempre. La paleta "mono" (acento negro) lo cambia a blanco. */ --sobre-acento: #141414; /* Estado de error del formulario. A propósito claramente distinto del acento. */ --error: #c0392b; /* ---- Tipografía ---- UNA sola fuente en todo: Ana no quiere la monoespaciada. `--f-mono` se queda como alias por si algún sitio aún lo usa, pero apunta a la misma fuente. (Fuente de trabajo provisional hasta que Ana elija entre las 5 opciones.) */ --f-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-mono: var(--f-ui); --fs-body: 1rem; --lh-body: 1.6; /* ---- Escala de espacio ---- */ --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 6.5rem; /* ---- Layout ---- */ --ancho: 1180px; /* el contenido vive en un contenedor centrado */ --pad-x: clamp(1.15rem, 4vw, 3rem); --rail: 84px; /* el carril de iconos reserva SU sitio (nunca solapa) */ /* ---- Radios ---- Discretos: es "básico", no burbujeante. */ --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-pill: 999px; --r-btn: var(--r-pill); /* radio del botón (el set curado lo cambia) */ /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.25s; --dur-appear: 0.7s; --appear-y: 22px; } /* Entrada al viewport: fundido con subida corta (igual mecánica que las demás). */ @keyframes pro-appear { from { opacity: 0; transform: translateY(var(--appear-y)); } to { opacity: 1; transform: none; } } .has-js .appear { opacity: 0; transform: translateY(var(--appear-y)); } .appear.in { animation: pro-appear var(--dur-appear) var(--ease) forwards; } @media (prefers-reduced-motion: reduce) { .has-js .appear, .appear { opacity: 1 !important; transform: none !important; animation: none !important; } } /* En el EDITOR (preview `/pro-preview`, body.pro-editing) la entrada con fundido se apaga: el preview se recarga en cada cambio y el fundido reapareciendo cada vez distraía. El contenido se ve al instante y estable mientras se rellena. */ body.pro-editing .has-js .appear, body.pro-editing .appear { opacity: 1 !important; transform: none !important; animation: none !important; } /* ═══ PALETAS DE PRO ═════════════════════════════════════════════════════════ * 8 paletas (incluida la original). Negro y blanco son FIJOS: lo ÚNICO que * cambia es el acento (el tercer color). Los derivados salen de tinta+papel, así * que no hay que tocar nada más. Las muestras del selector viven en paletas.ts. * · 6 pastel: Rosa (original) · Cielo · Menta · Arena · Lavanda · Coral * · 1 neón: Neón * · 1 B/N: Mono (acento negro → todo blanco y negro; el texto sobre el * acento pasa a blanco) * "original" (rosa) no lleva bloque: es la de arriba. * ─────────────────────────────────────────────────────────────────────────── */ :root[data-paleta="cielo"] { --acento: #a7d3ec; } /* azul pastel */ :root[data-paleta="menta"] { --acento: #b8d8c4; } /* verde pastel */ :root[data-paleta="arena"] { --acento: #e7c7a3; } /* melocotón pastel */ :root[data-paleta="lavanda"] { --acento: #d7c4ee; } /* lila pastel */ :root[data-paleta="coral"] { --acento: #f4b8ac; } /* coral pastel */ :root[data-paleta="neon"] { --acento: #d6fb3c; } /* verde neón */ /* Mono · todo blanco y negro: el acento es la tinta, y el texto sobre el acento pasa a blanco para que las pastillas/tarjetas negras se lean. */ :root[data-paleta="mono"] { --acento: #141414; --sobre-acento: #ffffff; } /* ═══ FAMILIAS DE COLOR (segundo grupo) ══════════════════════════════════════ * A diferencia de las 8 de arriba (solo cambian el acento, fondo blanco fijo), * una FAMILIA son TRES colores que combinan: cambia el papel (fondo), la tinta * (texto) y el acento a la vez. Como todo lo demás se deriva de esas tres con * color-mix(), basta con declararlas — líneas, fondos suaves y textos atenuados * salen solos, y funcionan igual en las claras que en la oscura ("Noche"). * `--sobre-acento` (texto sobre el botón de acento) se ajusta a blanco donde el * acento es medio/oscuro. Muestras del selector en paletas.ts. * ─────────────────────────────────────────────────────────────────────────── */ :root[data-paleta="fam-terracota"] { --papel:#f4ede4; --tinta:#33261d; --acento:#bc6b43; --sobre-acento:#ffffff; } :root[data-paleta="fam-mostaza"] { --papel:#f4efe3; --tinta:#21293a; --acento:#c79a3a; } :root[data-paleta="fam-salvia"] { --papel:#ecefe8; --tinta:#262b22; --acento:#6e8163; --sobre-acento:#ffffff; } :root[data-paleta="fam-vino"] { --papel:#f6ece9; --tinta:#43222a; --acento:#9e4a56; --sobre-acento:#ffffff; } :root[data-paleta="fam-cobalto"] { --papel:#ecf0f5; --tinta:#182338; --acento:#3c63a6; --sobre-acento:#ffffff; } :root[data-paleta="fam-oliva"] { --papel:#f0eee4; --tinta:#2c2a20; --acento:#8a7a38; --sobre-acento:#ffffff; } :root[data-paleta="fam-ciruela"] { --papel:#f1ecf1; --tinta:#322539; --acento:#7e5a80; --sobre-acento:#ffffff; } :root[data-paleta="fam-carbon"] { --papel:#1b1a18; --tinta:#ece5d8; --acento:#c7a24e; } /* ═══ SETS CURADOS · TIPOGRAFÍA y BOTÓN ══════════════════════════════════════ * Como las paletas: se elige entre opciones diseñadas, nunca libre. Por defecto * Manrope (arriba) y botón píldora. data-font en cambia la tipografía; * data-boton cambia el radio del botón. Roster en templates/estilos.ts. * ─────────────────────────────────────────────────────────────────────────── */ :root[data-font="inter"] { --f-ui: 'Inter', system-ui, -apple-system, sans-serif; } :root[data-font="dmsans"] { --f-ui: 'DM Sans', system-ui, -apple-system, sans-serif; } :root[data-font="poppins"] { --f-ui: 'Poppins', system-ui, -apple-system, sans-serif; } :root[data-font="sora"] { --f-ui: 'Sora', system-ui, -apple-system, sans-serif; } :root[data-font="grotesk"] { --f-ui: 'Space Grotesk', system-ui, -apple-system, sans-serif; } :root[data-font="franklin"] { --f-ui: 'Libre Franklin', system-ui, -apple-system, sans-serif; } :root[data-font="bricolage"] { --f-ui: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; } :root[data-font="lora"] { --f-ui: 'Lora', Georgia, 'Times New Roman', serif; } :root[data-font="fraunces"] { --f-ui: 'Fraunces', Georgia, 'Times New Roman', serif; } :root[data-font="playfair"] { --f-ui: 'Playfair Display', Georgia, 'Times New Roman', serif; } :root[data-font="spectral"] { --f-ui: 'Spectral', Georgia, 'Times New Roman', serif; } :root[data-boton="rounded"] { --r-btn: var(--r-m); } :root[data-boton="square"] { --r-btn: 8px; }