/* WebComerce — design tokens
   Estilo "marketplace de creadores": lienzo blanco, un solo acento violeta,
   bordes finos en lugar de sombras. Ver design/DESIGN_SYSTEM.md. */

/* Roobert y SharpGrotesk son fuentes con licencia: usamos sus sustitutos libres. */
/* Fuentes del sistema: la visita no envía peticiones a proveedores de tipografía. */

:root {
  /* Colores */
  --color-ink: #151523;          /* texto principal, header oscuro, chips seleccionados */
  --color-accent: #4e64df;       /* único acento: CTAs, links, activos, estrellas */
  --color-accent-light: #99a7f5; /* hover, bordes de nav */
  --color-accent-mid: #6c7ee4;   /* iconos, bordes secundarios */
  --color-accent-pale: #d0d6fb;  /* borde de tarjeta resaltada */
  --color-accent-wash: #f1f3fe;  /* fondos de sección tintados */
  --color-alert: #ff0000;        /* SOLO badges de carrito y alertas urgentes */
  --color-text-muted: #49495a;
  --color-white: #ffffff;
  --color-fog: #e9e9ec;          /* superficies secundarias */
  --color-border: #d7d7db;       /* borde por defecto de inputs, tarjetas, chips */
  --color-steel: #b9b9c1;        /* placeholders, iconos apagados */

  /* Tipografía */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-caption: 11px;    --leading-caption: 1.2;
  --text-sm: 12px;         --leading-sm: 1.33;
  --text-body: 14px;       --leading-body: 1.43;
  --text-body-lg: 16px;    --leading-body-lg: 1.5;
  --text-subheading: 18px; --leading-subheading: 1.56;
  --text-heading-sm: 20px; --leading-heading-sm: 1.2;
  --text-heading: 24px;    --leading-heading: 1.15;
  --text-heading-lg: 28px; --leading-heading-lg: 1.14;
  --text-display: 32px;    --leading-display: 1.13;
  --text-display-lg: 40px; --leading-display-lg: 1.15;

  /* Espaciado (base 4px, densidad compacta) */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-80: 80px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 48px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Radios */
  --radius-chip: 8px;     /* inputs, chips de talla/estilo, stepper */
  --radius-button: 12px;  /* botones y tarjetas */
  --radius-card: 12px;
  --radius-image: 20px;
  --radius-pill: 100px;   /* nav, tags */

  /* Sombras (nunca más fuertes que --shadow-card) */
  --shadow-raised: rgba(21, 21, 35, 0.2) 0 2px 4px;
  --shadow-cta: rgba(0, 0, 0, 0.2) 0 2px 6px;
  --shadow-card: rgba(21, 21, 35, 0.2) 0 4px 8px;

  /* Acento celebratorio, solo como borde de 2-3px en destacados */
  --gradient-rainbow: linear-gradient(60deg, #25d454, #fed35d, #feb21b, #df2a2a, #4e64df, #b3eafe, #25d454);
}