/* ============================================================================ ALEJANDRA VERGEL · tokens.css — el sistema. Un solo lugar, una sola verdad. ---------------------------------------------------------------------------- Antes de este archivo el sitio tenia CINCO bloques :root distintos, con valores DIVERGENTES para los mismos nombres: index / product / checkout / politicas → --ivory:#EBE5DB · --noir:#2B211B checkout-success → --ivory:#F7F4EF · --noir:#14110F --tiffany:#0ABAB5 (turquesa fosil) La pagina de confirmacion de compra corria con la paleta de dos redisenos atras. Ahora los cinco HTML enlazan ESTE archivo y borran su :root propio. REGLA DURA: ningun color, tamano de fuente, radio, sombra o duracion se escribe suelto en un componente. Si no existe como token, se agrega aqui con criterio, o no se necesita. Cada token de color lleva su RATIO DE CONTRASTE REAL medido (WCAG 2.1). El comentario no es adorno: es lo que impide que el token se degrade con el tiempo "porque se veia mas elegante mas claro". ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · COLOR Fondos de referencia del sitio: --ivory #EBE5DB (body de index, product, checkout, politicas) --white #FFFDFA (tarjetas, catalogo) --vainilla #F6EADA (franja newsletter) --noir #2B211B (contacto, footer, botones) Los ratios anotados son SIEMPRE contra el peor fondo donde el token se usa. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ---- Superficies ---- */ --ivory:#EBE5DB; /* fondo principal */ --vainilla:#F6EADA; /* fondo calido alterno (newsletter) */ --white:#FFFDFA; /* tarjetas y superficies elevadas */ --noir:#2B211B; /* espresso calido — nunca negro puro sobre calido */ /* ---- Texto ---- */ --ink:#3A2F27; /* cuerpo · sobre ivory 10.37:1 AAA · sobre white 12.80:1 AAA */ --ink-soft:#706055; /* secundario· sobre ivory 4.80:1 AA · sobre white 5.92:1 AA ERA #85756A = 3.53:1 sobre ivory → FALLABA AA en todos los parrafos secundarios del sitio. Oscurecido 3 pasos. */ --sobre-noir:#FFFDFA; /* texto sobre --noir · 15.48:1 AAA */ /* ---- Acento primario · dusty rose (el unico que manda en accion) ---- */ --rose-deep:#875C4E; /* sobre ivory 4.57:1 AA · sobre white 5.63:1 AA blanco ENCIMA de el 5.72:1 AA (botones del Club) ERA #A97C6E = 2.89:1 sobre ivory y 3.62:1 en blanco sobre el → el boton "Unirme al Club" fallaba AA. */ --rose-deeper:#6E4A3E; /* hover del anterior · sobre white 7.63:1 AAA */ --rose:#CEA69B; /* DECORATIVO. 2.17:1 sobre white → NUNCA texto ni borde de foco */ /* ---- Dorado · el color de firma de la marca ---- */ --gold:#C9A24B; /* SOLO sobre fondos OSCUROS y como decoracion. sobre --noir 6.55:1 AA ✔ sobre --ivory 1.92:1 ✘ — prohibido como texto en claro */ --gold-soft:#E7D3A1; /* sobre --noir 10.65:1 AAA — eyebrows en secciones oscuras */ --oro-texto:#7E5F1F; /* EL dorado para texto sobre fondo CLARO. sobre ivory 4.73:1 AA · white 5.84:1 AA · vainilla 4.99:1 AA Sustituye a --gold en eyebrows, migas y cifras. */ /* ---- Salvia · acento secundario (exito, envio gratis, paso completado) ---- */ --salvia:#5E6349; /* sobre white 6.16:1 AA · blanco encima 6.26:1 AA ERA #B2B3A0 = 2.10:1 → el punto "paso hecho" del checkout y el descuento en la confirmacion eran ilegibles. */ --salvia-tenue:#B2B3A0; /* DECORATIVO: fondos y bordes tenues. Nunca texto. */ /* ---- Estructura ---- */ --line:#DED2C2; /* linea sutil · 1.47:1 — separador, NO borde de foco */ --line-fuerte:#C4B49E; /* borde de control cuando hace falta que se vea */ /* ---- Foco. Un solo anillo para todo el sitio. ---- */ --foco:#875C4E; /* 4.57:1 sobre ivory — supera de sobra el 3:1 de WCAG 2.4.11 */ --foco-claro:#E7D3A1; /* el mismo anillo sobre secciones oscuras */ /* ---- Alias LEGADO ---------------------------------------------------- No usar en CSS nuevo. Existen porque perfil.js inyecta su propia hoja con var(--cartier,#A6192E) / var(--tiffany,...): si el nombre no estuviera definido, el panel de perfil volveria al carmesi Cartier de dos redisenos atras. Apuntan a los tokens de rol, asi que no pueden divergir. */ --cartier:var(--rose-deep); --cartier-deep:var(--rose-deeper); --tiffany:var(--salvia); --tiffany-soft:var(--salvia-tenue); --sage:var(--salvia); /* ---- Paleta de marca sin uso en interfaz (documentada, no aplicada) ---- */ --nude:#E6D0BF; --chai:#DFCBBB; --shell:#E0C2AF; --blush:#E4C3B8; } /* ═══════════════════════════════════════════════════════════════════════════ 2 · TIPOGRAFIA Escala fluida con clamp(): interpola entre 390px y 1440px sin saltos por breakpoint. NUEVE pasos. Antes habia 14 tamanos distintos renderizados en index.html y 38 declarados en el proyecto, con incrementos de 0.02rem. Cada paso da un valor unico a 390px → 9 tamanos, no 14. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif; --sans:"Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-3xs:clamp(.625rem, .602rem + .095vw, .688rem); /* 10 → 11px versalitas micro */ --fs-2xs:clamp(.719rem, .684rem + .143vw, .813rem); /* 11.5 → 13px eyebrow, botones */ --fs-xs: clamp(.813rem, .778rem + .143vw, .906rem); /* 13 → 14.5px nav, metadatos */ --fs-sm: clamp(.906rem, .871rem + .143vw, 1rem); /* 14.5 → 16px texto secundario */ --fs-md: clamp(1rem, .954rem + .190vw, 1.125rem); /* 16 → 18px cuerpo */ --fs-lg: clamp(1.188rem, 1.095rem + .381vw, 1.438rem);/* 19 → 23px destacados, nombres */ --fs-xl: clamp(1.5rem, 1.314rem + .762vw, 2rem); /* 24 → 32px h3 */ --fs-2xl:clamp(1.875rem, 1.457rem + 1.714vw, 3rem); /* 30 → 48px h2 */ --fs-3xl:clamp(2.375rem, 1.632rem + 3.048vw, 4.375rem);/* 38 → 70px h1 del hero */ --lh-apretado:1.05; /* display grande: a 4rem, 1.5 abre un abismo */ --lh-corto:1.25; --lh-normal:1.6; /* prosa */ --lh-suelto:1.75; --track-display:-.01em; --track-normal:0; --track-amplio:.14em; --track-marca:.34em; /* eyebrows en versalitas */ --track-sello:.42em; /* "JOYAS DE AUTOR" bajo el logotipo */ --medida:65ch; /* 45-75 caracteres. Por encima de 85 el ojo pierde el renglon. */ --medida-estrecha:45ch; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ESPACIO · base 4px, escala casi geometrica ═══════════════════════════════════════════════════════════════════════════ */ :root{ --e-1:.25rem; /* 4px */ --e-2:.5rem; /* 8px */ --e-3:.75rem; /* 12px */ --e-4:1rem; /* 16px */ --e-5:1.5rem; /* 24px */ --e-6:2rem; /* 32px */ --e-7:3rem; /* 48px */ --e-8:4rem; /* 64px */ --e-seccion:clamp(3.75rem, 2.5rem + 5vw, 7rem); /* ritmo vertical entre secciones */ } /* ═══════════════════════════════════════════════════════════════════════════ 4 · FORMA, SOMBRA, MOVIMIENTO Cuatro radios. Antes coexistian 4/6/10/12/20/30/40/999px sin regla. Las sombras se tinen con el espresso de la escena (43,33,27), nunca con negro: una sombra negra sobre papel calido ensucia el sitio. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --radius:4px; /* nombre legado, mismo valor — es el radio editorial base */ --r-1:4px; --r-2:12px; --r-3:20px; --r-full:999px; --shadow-sm:0 10px 30px -16px rgba(43,33,27,.26); --shadow:0 24px 60px -28px rgba(43,33,27,.28); --shadow-lg:0 34px 80px -34px rgba(43,33,27,.42); --shadow-drawer:-20px 0 60px -20px rgba(43,33,27,.42); /* Cinco duraciones y cinco curvas. Un vocabulario corto obliga a la coherencia: un boton y un panel a pantalla completa no comparten curva. */ --dur-micro:150ms; --dur-rapido:250ms; --dur-medio:350ms; --dur-lento:600ms; --dur-cine:900ms; --ease-salida:cubic-bezier(.2,.7,.3,1); /* la curva de autor del sitio */ --ease-suave:cubic-bezier(.16,1,.3,1); --ease-entrada:cubic-bezier(.4,0,.2,1); --ease-panel:cubic-bezier(.4,0,.1,1); --ease-lineal:linear; } /* ═══════════════════════════════════════════════════════════════════════════ 5 · BASE COMPARTIDA ═══════════════════════════════════════════════════════════════════════════ */ h1,h2,h3,h4{text-wrap:balance} p{text-wrap:pretty} /* Foco visible, SIEMPRE. Antes: cero :focus-visible en todo el proyecto y `outline:none` en 6 controles, sustituido solo por un cambio de color de borde de 1.47:1 — invisible. Navegar con teclado era imposible. */ :focus-visible{ outline:2px solid var(--foco); outline-offset:3px; border-radius:var(--r-1); } :focus:not(:focus-visible){outline:none} /* Sobre superficies oscuras el anillo cambia a dorado claro para no perderse. */ .contact :focus-visible, .footer :focus-visible, .hero :focus-visible, .editorial :focus-visible, .club-hero :focus-visible, .strip :focus-visible{ outline-color:var(--foco-claro); } /* Los controles que hacen `outline:none` en su propia hoja recuperan el anillo aqui, con especificidad suficiente para ganar sin tocar sus reglas. */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; } .solo-lectores{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } ::selection{background:var(--rose-deep);color:var(--white)} /* -------------------------------------------------------------------------- Correcciones al panel de perfil (perfil.js inyecta su propia