Identidad visual propia (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md): paleta terracota/espresso/pino/crema/carbon reemplaza los tokens --color-ari-cyan/magenta/yellow/blue (confirmado sin uso en ningun componente antes de tocarlos). Fraunces + Inter cargadas via next/font/google (antes "Inter" era solo un fallback de CSS sin garantia real de carga). Cambio minimo a proposito: nueva variant "primary" en button.tsx sin tocar la clase base compartida (radio, ring de foco quedan igual para el resto del sitio), aplicada como smoke test unico en el CTA y el precio de ProductCard. El resto de la propagacion (header, footer, badges, home, product detail) queda para las Sub-fases 2-5, cada una con su propio gate. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio.
39 lines
1.9 KiB
CSS
39 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ADR 0007 -- identidad visual propia (no derivada de ningun
|
|
competidor). Cada token tiene un rol unico y deliberado, ver
|
|
docs-portal/docs/decisiones/0007-identidad-visual-propia.md */
|
|
--color-ari-terracota: #C1502E; /* CTA -- unico uso reservado a accion */
|
|
--color-ari-espresso: #2B1B13; /* ancla oscura: header/footer */
|
|
--color-ari-pino: #2F6F62; /* links / senales de confianza */
|
|
--color-ari-crema: #FBF3E7; /* fondo general */
|
|
--color-ari-carbon: #2E2620; /* texto principal */
|
|
--color-ari-oro: #E3A008; /* badge "destacado" */
|
|
--color-ari-ladrillo: #A83232; /* badge de descuento */
|
|
--font-display: var(--font-fraunces), ui-serif, Georgia, serif;
|
|
--animate-accordion-down: accordion-down .2s ease-out;
|
|
--animate-accordion-up: accordion-up .2s ease-out;
|
|
}
|
|
|
|
@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
|
|
@keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
|
|
|
|
:root { color-scheme: light; }
|
|
* { border-color: rgb(226 232 240); }
|
|
html { scroll-behavior: smooth; }
|
|
body { margin: 0; background: var(--color-ari-crema); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(47 111 98 / .45); outline-offset: 3px; }
|
|
::selection { background: rgb(193 80 46 / .25); color: var(--color-ari-carbon); }
|
|
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 1px 900px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
}
|