Sistema visual

Filosofía

El sistema visual es Onyx + Champagne: una paleta seria, premium y neutral que no compite con la iconografía de las franquicias TCG. No usamos colores vibrantes de marca (rojo Pokémon, azul Magic, etc.) — el sitio es neutral porque es multi-TCG.

Reglas firmes:

• Todo nuevo componente soporta dark y light desde el primer commit (no son una feature posterior).
• Cero hex hardcoded en JSX/TSX/CSS fuera de los archivos de emails. Siempre usar tokens.
• Color space: OKLCH (no HSL ni RGB), para uniformidad perceptual entre modos.

Paleta — tokens shadcn

Definida en src/app/globals.css. Usar siempre las variables CSS (var(--primary)) o las clases Tailwind generadas (bg-primary, text-foreground, etc.).

Modo claro (:root)

Token	Valor (OKLCH)	Uso
--background	0.99 0.005 80	Fondo de página
--foreground	0.18 0.01 280	Texto principal (onyx)
--card	1.00 0 0	Fondo de cards
--card-foreground	0.18 0.01 280	Texto sobre cards
--muted	0.96 0.008 80	Fondo neutro secundario
--muted-foreground	0.50 0.01 280	Texto secundario
--primary	0.74 0.10 80	Champagne — acción principal
--primary-foreground	0.18 0.01 280	Texto sobre primary
--accent	0.93 0.04 80	Hover/realce sutil
--secondary	0.96 0.008 80	Acción secundaria
--border	0.92 0.005 80	Líneas y separadores
--ring	0.74 0.10 80	Focus ring

Modo oscuro (.dark)

Token	Valor (OKLCH)	Notas
--background	0.13 0.005 280	Fondo oscuro azulado-onyx
--foreground	0.96 0.005 80	Casi blanco champagne
--card	0.16 0.005 280	Card un poco más claro que bg
--muted-foreground	0.78 0.01 280	Subido desde 0.68 para contraste 6.5:1 sobre card
--primary	0.78 0.10 80	Champagne más luminoso
--accent	0.30 0.05 80	Realce oscuro

El muted-foreground en dark se ajustó intencionalmente para pasar WCAG AA. No bajar de 0.78 sin verificar contraste.

Estados semánticos

Cuatro estados con foreground propio para garantizar contraste:

Token	Light	Dark	Uso
--success	verde 145°	verde luminoso	Confirmaciones, badges OK
--warning	ámbar 70°	ámbar luminoso	Avisos, badges pendientes
--destructive	rojo 25°	rojo luminoso	Errores, eliminación
--info	azul 240°	azul luminoso	Información neutral

Cada uno tiene su *-foreground correspondiente (siempre usarlo cuando se usa el de fondo).

Tipografías

Tres familias de fuente declaradas en src/app/layout.tsx:

Variable CSS	Familia	Uso
--font-sans	Inter	Texto general, párrafos, UI
--font-display	Fraunces (500/600/700)	Headings de marketing y títulos grandes
--font-mono	Geist Mono	Código, IDs, precios técnicos

En Tailwind:

• font-sans → Inter (default del body)
• font-display → Fraunces (usar para <h1> de páginas hero, no para todos los headings)
• font-mono → Geist Mono

Fraunces tiene display: swap para no bloquear render. Inter es default.

Escala de radios

Base: --radius: 0.625rem (10px). Todos derivan de aquí:

Token	Cálculo	Aproximado
--radius-sm	radius * 0.6	6px
--radius-md	radius * 0.8	8px
--radius-lg	radius * 1.0	10px (default)
--radius-xl	radius * 1.4	14px
--radius-2xl	radius * 1.8	18px
--radius-3xl	radius * 2.2	22px
--radius-4xl	radius * 2.6	26px

Si en el futuro queremos un look más cuadrado o más redondeado, basta cambiar --radius y toda la escala se ajusta.

Sombras

Una sola sombra custom: --shadow-premium.

Modo	Valor
Light	0 1px 2px 0 rgb(20 20 25 / 0.04), 0 4px 12px -2px rgb(20 20 25 / 0.06)
Dark	0 1px 2px 0 rgb(0 0 0 / 0.4), 0 4px 16px -2px rgb(232 196 128 / 0.06)

Uso: cards destacados (shadow-premium en Tailwind). En dark tiene un glow champagne sutil.

Para sombras genéricas, usar las de Tailwind (shadow-sm, shadow-md).

Gráficos

Cinco colores alineados a la paleta (para charts si se agregan):

• --chart-1 → primary (champagne)
• --chart-2 → muted-foreground (gris)
• --chart-3 → success (verde)
• --chart-4 → warning (ámbar)
• --chart-5 → info (azul)

Sidebar

Variantes propias --sidebar-* para layouts con sidebar (admin, dashboard). Mismos tonos pero ligeramente diferenciados del background general para crear jerarquía visual.

Archivos relevantes

• src/app/globals.css — definición de tokens (light + dark)
• src/app/layout.tsx — declaración de fuentes Next.js
• components.json — config shadcn (style radix-nova, base neutral)