feat(ecommerce): ADR 0007 Sub-fase 1 - tokens base + smoke test

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.

workloads/ecommerce/components/product/product-card.tsx

@@ -70,9 +70,11 @@ 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>}
-            <strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
+            {/* 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>
           </div>
-          <Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
+          {/* 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>
         </div>
       </div>
     </article>

workloads/ecommerce/components/ui/button.tsx

@@ -9,6 +9,11 @@ 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",