/* ws-tokens/index.css — colors + typography + spacing + radius + shadows
   fusionados en un solo archivo (28 ago 2026, pedido: "hacer la web
   mucho más rápida") — antes eran 5 archivos separados, cada uno una
   petición HTTP bloqueante más en el <head> para menos de 3KB de CSS
   en total. Mismo contenido exacto de los 5 archivos originales
   (colors.css/typography.css/spacing.css/radius.css/shadows.css, que
   se conservan en este mismo directorio sin cambios, por si algo más
   los llegara a necesitar sueltos) — son bloques :root{} independientes,
   así que fusionarlos no cambia ningún valor ni requiere un orden
   particular de carga. */

:root {
  /* El sitio es 100% oscuro, sin toggle de tema claro — esto le dice al
     navegador que pinte los controles nativos (la LISTA de opciones de
     un <select> abierto, date/time pickers, scrollbars) en su tema
     oscuro también. Ningún CSS de autor puede restylear esa lista de
     opciones directamente; esta es la única palanca real para que deje
     de verse "blanca y genérica" al abrirla. */
  color-scheme: dark;

  /* Neutral scale (zinc) — shared by marketplace, seller and admin */
  --ws-bg: #050506;
  --ws-surface: #101012;
  --ws-surface-2: #1a1a1d;
  --ws-surface-hover: #3f3f46;
  --ws-border: #1a1a1d;
  --ws-border-strong: #3f3f46;
  --ws-text: #f4f4f5;
  --ws-muted: #a1a1aa;
  --ws-muted-2: #71717a;

  /* Brand — rojo es el color primario across all 3 products */
  --ws-brand: #a855f7;
  --ws-brand-strong: #c084fc;
  --ws-brand-dim: rgba(168, 85, 247,0.12);
  /* Tripletes RGB (sin envoltorio rgb()) para poder componer
     rgba(var(--ws-brand-rgb), alpha) en gradients/box-shadow que
     necesitan transparencia variable, sin volver a hardcodear el color. */
  --ws-brand-rgb: 168, 85, 247;
  --ws-brand-strong-rgb: 192, 132, 252;

  /* Accent secundario: rojo cálido para links/highlights/hero.
     El nombre histórico se conserva para no romper consumidores existentes. */
  --ws-accent-cyan: #ff4d5e;
  --ws-accent-cyan-dim: rgba(255,77,94,0.12);

  /* Semantic status — one definition, used the same way everywhere */
  --ws-info: #3b82f6;
  --ws-success: #10b981;
  --ws-warning: #f59e0b;
  --ws-danger: #ef4444;

  /* La carga real de Google Fonts vive en un <link> (o @import propio) en
     cada HTML que la necesita — index.html/wormshop.html, wormshop-seller.html,
     wormshop-admin.html, wormshop-affiliator.html — cada uno pide solo los
     pesos que realmente usa. Este archivo solo define los tokens de familia;
     NO debe volver a declarar su propio @import de Google Fonts, o vuelve a
     descargarse todo el set completo por duplicado en cada página. */
  /* Body copy, UI labels, buttons, inputs — everything except headline moments and numbers */
  --ws-font-body: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif;
  /* Hero copy, section titles, page titles, brand wordmark — never body text */
  --ws-font-display: 'Space Grotesk', 'Inter', sans-serif;
  /* Money, codes, stats, technical data */
  --ws-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Roboto Mono', 'Segoe UI Mono', monospace;

  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-space-7: 48px;
  --ws-space-8: 64px;

  --ws-radius-sm: 6px;
  --ws-radius-md: 8px;
  --ws-radius-lg: 12px;
  --ws-radius-xl: 16px;

  --ws-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --ws-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --ws-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

  /* Minimal glow — opt-in only, for primary CTAs / logo / featured cards */
  --ws-glow-brand: 0 0 24px rgba(168, 85, 247,0.25);
  --ws-glow-cyan: 0 0 20px rgba(255,77,94,0.2);
}