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/app/globals.css

@@ -1,10 +1,17 @@
 @import "tailwindcss";
 
 @theme {
-  --color-ari-cyan: #06b6d4;
-  --color-ari-magenta: #ec4899;
-  --color-ari-yellow: #fde047;
-  --color-ari-blue: #0f172a;
+  /* 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;
 }
@@ -15,10 +22,10 @@
 :root { color-scheme: light; }
 * { border-color: rgb(226 232 240); }
 html { scroll-behavior: smooth; }
-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; }
+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(167 139 250 / .55); outline-offset: 3px; }
-::selection { background: #fde047; color: #0f172a; }
+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;