/* ============================================================ BIOWELLNESS · DESIGN TOKENS ------------------------------------------------------------ Fuente de verdad de la identidad visual. Editá acá y todo el sitio se actualiza. Este archivo se carga PRIMERO. SISTEMA DE MARCA DEFINITIVO (migración de septiembre 2026). El acento dejó de ser el coral/naranja del espectro y pasó a ser COBRE, con degradado metálico. La tipografía se unificó en Montserrat: se fueron la serif (Fraunces) y la monoespaciada (IBM Plex Mono). Es el mismo sistema que el repo `web`, y los nombres de token coinciden a propósito. TRES COSAS NO MIGRARON, y ninguna es un olvido: 1. Los niveles de evidencia de logica.html (ENSAYOS · PRELIMINAR · FUNDAMENTO). Son una leyenda funcional. 2. Los seis colores de los resultados y los tres grupos de marcas, por el mismo motivo. 3. Las maquetas SVG del Portal, que dibujan pantallas reales de la App y llevan su paleta y su tipografía, no las nuestras. Ver el detalle en cada bloque. ============================================================ */ /* Orden del cascade (CSS Layers). Regla práctica: cualquier CSS que escribas SIN capa (por ejemplo, estilos propios de una página) le gana a todas estas capas. */ @layer reset, base, layout, components, utilities; :root{ /* ---------- Cobre: el acento de la marca ---------- #A07557 da 4,85:1 sobre --ink y 4,61:1 sobre --ink-2: pasa WCAG AA como texto sobre oscuro. Sobre fondo claro NO llega (3,4:1), y para eso está --accent-tx. */ --copper: #A07557; --copper-deep: #3D1F12; /* arranque del metálico */ --copper-light: #D9AE91; /* brillo del metálico */ --tan: #D09A65; /* acento secundario tostado · 7,96:1 sobre --ink */ /* Roles del acento. Los componentes usan estos, no los cobres crudos: así el día que el cobre cambie de tono, cambia acá. */ --accent: var(--copper); --accent-strong: var(--tan); /* cuando el acento tiene que gritar sobre oscuro */ --accent-tx: #8A5F42; /* cobre legible sobre fondo claro · 4,7:1 sobre --bone */ /* ---------- Superficies ---------- */ --ink: #0B0B0B; /* fondo de marca */ --ink-2: #17110D; /* superficie elevada sobre oscuro (tarjetas) */ --ink-3: #2A1F17; /* bordes sobre oscuro */ --habana: #3E2A18; /* marrón habana · secciones profundas y pie */ --bone: #F2ECE4; /* fondo claro, papel tibio */ --bone-2: #FBF7F2; /* tarjetas sobre claro */ --stone: #DED4C8; /* bordes sobre claro */ /* ---------- Texto ---------- Sobre oscuro el texto es crema, no blanco: 12,07:1 sobre --ink y 11,47:1 sobre --ink-2. El apagado da 6,57:1. */ --tx-d: #0B0B0B; --tx-d-mut: #6B5A4B; --tx-l: #E6C5A3; --tx-l-mut: #A8917C; /* ---------- Leyenda funcional: evidencia y resultados ---------- NO SON DECORACIÓN, y por eso quedaron fuera de la migración. `logica.html` los usa para tres cosas que dejan de significar si se recolorean: · Los tres NIVELES DE EVIDENCIA. --oxy sostiene «Ensayos en personas» y --amber «Evidencia preliminar»; el tercero, «Fundamento mecanístico», es gris a propósito para que no compita. Es la clave que permite leer toda la matriz de terapia × marca, y es lo más cuidado del sitio. · Los SEIS RESULTADOS, con un color por resultado. · Los TRES GRUPOS de marcas del envejecimiento. Lo mismo vale para la rueda de las doce marcas del repo `web`. Si alguna vez se recolorean, es una decisión de producto y hay que rehacer las tres escalas juntas — no un re-skin. */ --amber: #E6A23C; /* evidencia preliminar · 590 nm */ --red: #D64A2A; /* 660 nm · y rojo semántico, ver abajo */ --infra: #6E1C18; /* infrarrojo cercano */ --oxy: #2BA79D; /* ensayos en personas */ --oxy-deep: #0F6A64; /* ---------- Colores semánticos ---------- Alias explícitos para que se entienda, leyendo un componente, si un color es marca, leyenda o advertencia. Nunca se reemplazan por cobre. --danger · límites y precauciones: errores de formulario, el bloque «qué NO es esta guía», las contraindicaciones, «para quién no». --warn · advertencias blandas: «avisanos antes si…» y la faja de borrador pendiente de validación médica. Es ámbar porque avisa, no porque sea la marca. */ --danger: var(--red); --warn: var(--amber); /* ---------- Degradado metálico ---------- El degradado de la identidad: cobre oscuro → cobre → cobre claro. Lo usan los botones, los hovers, las reglas finas, el dot del logo y los títulos con acento. Reemplazó al viejo degradado de espectro (ámbar → coral → infrarrojo). */ --metal: linear-gradient(90deg, var(--copper-deep) 0%, var(--copper) 52%, var(--copper-light) 100%); --metal-v: linear-gradient(180deg, var(--copper-deep) 0%, var(--copper) 52%, var(--copper-light) 100%); --metal-45: linear-gradient(135deg, var(--copper-deep) 0%, var(--copper) 52%, var(--copper-light) 100%); /* Los tres de arriba son DECORACIÓN: reglas, barras, el dot del logo. Nunca va texto encima ni se recortan a texto, porque su arranque (--copper-deep) da 1,3:1 contra el texto oscuro y 1,9:1 contra el fondo. Para esos dos casos, una variante: --metal-btn · superficies con texto encima. Barrido de brillo que no baja nunca del cobre, así que --ink encima da 4,85:1 en el punto más exigente. --metal-tx · degradados recortados a texto sobre fondo oscuro. Arranca en cobre y sube: el peor tramo da 4,85:1. */ --metal-btn: linear-gradient(135deg, var(--copper) 0%, var(--copper-light) 55%, var(--copper) 100%); --metal-tx: linear-gradient(92deg, var(--copper) 0%, var(--copper-light) 45%, var(--tan) 100%); /* Compatibilidad: quedan apuntando al metálico para no romper CSS de página que los use sin capa. No usarlos en código nuevo. */ --spectrum: var(--metal); --spectrum-v: var(--metal-v); /* ---------- Tipografía ---------- Todo es Montserrat. Los tres nombres se conservan porque expresan el ROL —display, cuerpo, voz técnica— y así los componentes no cambiaron de forma; lo que cambió es que los tres resuelven a la misma familia. · display: ExtraBold 800 (antes Fraunces 400) · cuerpo: Regular 400 / Medium 500 · técnica: Medium 500 / SemiBold 600, en mayúsculas y con tracking, para conservar la textura de la monoespaciada que reemplaza. OJO: las maquetas SVG de /portal/ NO usan estos tokens. Llevan Manrope y Fraunces escritas a mano porque dibujan pantallas reales de la App, que tiene su propia tipografía. Si se migran, la ayuda del Portal muestra una pantalla que no existe. */ --ff-display: "Montserrat", Arial, Helvetica, sans-serif; --ff-body: "Montserrat", Arial, Helvetica, sans-serif; --ff-mono: "Montserrat", Arial, Helvetica, sans-serif; /* Pesos, para que la voz no se escriba a mano en cada componente */ --fw-display: 800; /* hero y títulos de sección (.display) */ --fw-title: 700; /* títulos de tarjeta y de bloque */ --fw-tech: 600; /* kickers, números, tags y nav */ /* Escala de display (usada por hero y títulos de sección) */ --fs-hero: clamp(2.9rem, 7.4vw, 6.1rem); --fs-h2: clamp(2rem, 4.6vw, 3.5rem); --fs-cta: clamp(2.2rem, 5vw, 4rem); /* ---------- Layout ---------- */ --maxw: 1200px; --pad: clamp(1.25rem, 5vw, 2.5rem); /* ---------- Espaciado (para componentes nuevos) ---------- */ --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ---------- Radios ---------- */ --r-sm: 11px; --r-md: 14px; --r-lg: 16px; --r-xl: 18px; --r-pill: 999px; /* ---------- Sombra ---------- */ --shadow-card: 0 22px 40px -26px rgba(11,11,11,.55); --shadow-btn: 0 6px 22px -8px rgba(160,117,87,.7); /* ---------- Motion ---------- */ --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .25s; --t-med: .4s; /* ---------- Contexto semántico (default: oscuro) ---------- Los componentes genéricos (formularios, notices, tablas) leen estas variables; .on-dark / .on-light las redefinen. */ --bg: var(--ink); --bg-2: var(--ink-2); --border: var(--ink-3); --tx: var(--tx-l); --tx-mut: var(--tx-l-mut); }