From ef16858d3573a7a93f74367e70994e8c5ba76e64 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Thu, 27 Aug 2026 01:07:54 -0500
Subject: [PATCH] revert: Sub-fase 1 ADR 0007 (tokens+smoke test) fuera de
 produccion

El smoke test en aislamiento (boton CTA terracota + precio en
Fraunces) no se puede juzgar de forma justa rodeado del resto de la
pagina, que sigue en la paleta anterior (badges NUEVO/TOP en fucsia/
amarillo, fondo blanco) -- choque visual real, no una direccion de
marca evaluable. Ademas la direccion terracota/artesanal en si no era
lo que se buscaba (se quiere premium/serio, no rustico).

Vuelve product-card.tsx y button.tsx a su estado anterior a Sub-fase
1. globals.css/layout.tsx quedan con los tokens y next/font ya
integrados (nadie los consume todavia, cero impacto visual) para no
rehacer ese trabajo de infraestructura -- la proxima iteracion de
diseno se construye y aprueba en una preview aislada (fuera del
storefront real) antes de volver a tocar produccion.
---
 workloads/ecommerce/app/globals.css           | 21 +++++++------------
 workloads/ecommerce/app/layout.tsx            | 11 ++--------
 .../components/product/product-card.tsx       |  6 ++----
 workloads/ecommerce/components/ui/button.tsx  |  5 -----
 4 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/workloads/ecommerce/app/globals.css b/workloads/ecommerce/app/globals.css
index ffa6535..c94cc02 100644
--- a/workloads/ecommerce/app/globals.css
+++ b/workloads/ecommerce/app/globals.css
@@ -1,17 +1,10 @@
 @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;
+  --color-ari-cyan: #06b6d4;
+  --color-ari-magenta: #ec4899;
+  --color-ari-yellow: #fde047;
+  --color-ari-blue: #0f172a;
   --animate-accordion-down: accordion-down .2s ease-out;
   --animate-accordion-up: accordion-up .2s ease-out;
 }
@@ -22,10 +15,10 @@
 :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; }
+body { margin: 0; background: #fff; color: #0f172a; font-family: 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); }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(167 139 250 / .55); outline-offset: 3px; }
+::selection { background: #fde047; color: #0f172a; }
 
 .content-auto {
   content-visibility: auto;
diff --git a/workloads/ecommerce/app/layout.tsx b/workloads/ecommerce/app/layout.tsx
index 56e4243..2293db6 100644
--- a/workloads/ecommerce/app/layout.tsx
+++ b/workloads/ecommerce/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata, Viewport } from "next";
-import { Fraunces, Inter } from "next/font/google";
 import "./globals.css";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { Footer } from "@/components/layout/footer";
@@ -21,15 +20,9 @@ export const metadata: Metadata = {
   openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
 };
 
-export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#2B1B13" };
-
-// ADR 0007: Fraunces (titulares/precio) + Inter (UI/cuerpo) cargadas via
-// next/font -- antes "Inter" era solo un nombre de fallback en el CSS, sin
-// garantia real de que el navegador tuviera esa fuente instalada.
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
-const fraunces = Fraunces({ subsets: ["latin"], variable: "--font-fraunces", display: "swap" });
+export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0f172a" };
 
 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   const [products, categories] = await Promise.all([getProducts(), getCategories()]);
-  return <html lang="es" className={`${inter.variable} ${fraunces.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
+  return <html lang="es"><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
 }
diff --git a/workloads/ecommerce/components/product/product-card.tsx b/workloads/ecommerce/components/product/product-card.tsx
index bf8d0fe..b6e1ce9 100644
--- a/workloads/ecommerce/components/product/product-card.tsx
+++ b/workloads/ecommerce/components/product/product-card.tsx
@@ -70,11 +70,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
         <div className="mt-auto flex items-center justify-between gap-3 pt-1">
           <div className="flex flex-col">
             {product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
-            {/* ADR 0007: smoke test de font-display (Fraunces) en el precio -- si se aprueba visualmente, se propaga al resto de precios en Sub-fase 3. */}
-            <strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
+            <strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
           </div>
-          {/* ADR 0007: smoke test de la variant "primary" (terracota) -- si se aprueba visualmente, reemplaza "magenta" en el resto del sitio en Sub-fases 2-5. */}
-          <Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
+          <Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
         </div>
       </div>
     </article>
diff --git a/workloads/ecommerce/components/ui/button.tsx b/workloads/ecommerce/components/ui/button.tsx
index b56bb7d..e090c38 100644
--- a/workloads/ecommerce/components/ui/button.tsx
+++ b/workloads/ecommerce/components/ui/button.tsx
@@ -9,11 +9,6 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-slate-950 text-white shadow-lg hover:-translate-y-0.5 hover:bg-slate-800",
-        // ADR 0007: unico color reservado a accion (nunca decorativo) --
-        // reemplaza gradualmente a "magenta" component por component
-        // (sub-fases 2-5), empezando por el CTA de ProductCard como
-        // smoke test visual antes de propagar al resto del sistema.
-        primary: "bg-ari-terracota text-white shadow-lg shadow-ari-terracota/25 hover:brightness-95",
         magenta: "bg-gradient-to-r from-fuchsia-500 to-pink-500 text-white shadow-lg shadow-pink-500/25 hover:-translate-y-0.5",
         yellow: "bg-yellow-300 text-slate-950 shadow-lg shadow-yellow-400/25 hover:-translate-y-0.5 hover:bg-yellow-200",
         outline: "border border-slate-200 bg-white text-slate-950 hover:border-cyan-400 hover:bg-cyan-50",