/**
 * Bicicletas SyM — tokens del sistema de diseño.
 *
 * Solo propiedades personalizadas de CSS (sin reglas de componentes).
 * Todos los componentes del tema hijo deben leer estos valores en lugar
 * de escribir colores, tamaños o sombras a mano.
 *
 * Esquema de nombres:
 *   --sym-color-*   colores (marca, neutros, semánticos, de uso)
 *   --sym-font-*    familias, tamaños, pesos, interlineado
 *   --sym-space-*   espaciado (escala de 4 px)
 *   --sym-radius-*  radios de borde
 *   --sym-shadow-*  sombras
 *   --sym-z-*       capas (z-index)
 *   --sym-focus-*   anillo de foco accesible
 *   --sym-motion-*  duraciones y curvas de animación
 *
 * Puntos de corte (mobile-first; las media queries no aceptan variables,
 * se documentan aquí y se usan como min-width):
 *   sm  600px   móvil grande / tablet vertical pequeña (3 columnas)
 *   md  768px   tablet
 *   lg  1024px  escritorio (4 columnas)
 *   xl  1280px  escritorio amplio
 *
 * Contraste WCAG 2.x (AA: 4,5:1 texto normal, 3:1 texto grande ≥ 24 px
 * o ≥ 18,66 px en negrita y elementos de interfaz):
 *   negro #000000 sobre amarillo #FFC300 ........ 13,06:1  AA/AAA
 *   blanco #FFFFFF sobre amarillo #FFC300 ....... 1,61:1   NO USAR nunca
 *   amarillo #FFC300 sobre blanco ............... 1,61:1   NO USAR para texto ni bordes
 *   amarillo #FFC300 sobre negro ................ 13,06:1  AA/AAA
 *   negro sobre amarillo hover #E6AF00 .......... 10,50:1  AA/AAA
 *   negro sobre gris claro #F2F4F4 .............. 19,02:1  AA/AAA
 *   neutral-600 #4E5454 sobre blanco ............ 7,72:1   AA/AAA
 *   neutral-500 #5E6565 sobre blanco ............ 5,96:1   AA (texto secundario)
 *   neutral-500 #5E6565 sobre #F2F4F4 ........... 5,40:1   AA
 *   neutral-400 #9AA1A1 sobre blanco ............ 2,63:1   solo decorativo (bordes, iconos inactivos)
 *   blanco sobre azul Addi #2466FF .............. 4,75:1   AA
 *   azul Addi #2466FF sobre #F2F4F4 ............. 4,30:1   solo texto grande; usar --sym-color-addi-text
 *   azul Addi texto #1F57D6 sobre blanco ........ 6,19:1   AA
 *   éxito #1E7B34 sobre blanco .................. 5,33:1   AA
 *   éxito #1E7B34 sobre #E8F5EB ................. 4,75:1   AA
 *   peligro #C62828 sobre blanco ................ 5,62:1   AA
 *   peligro #B3261E sobre #FDECEA ............... 5,72:1   AA
 *   blanco sobre neutral-800 #222525 ............ 15,45:1  AA/AAA
 */

:root {
	/* ---------- Marca ---------- */
	--sym-color-yellow: #ffc300;          /* amarillo SyM: fondos de CTA, insignias, acentos */
	--sym-color-yellow-hover: #e6af00;    /* estado hover/pressed del amarillo */
	--sym-color-yellow-soft: #fff3cc;     /* fondo suave para avisos y resaltados */
	--sym-color-yellow-ink: #7a5d00;      /* texto "amarillo" legible sobre fondo claro (5,58:1 sobre soft) */
	--sym-color-black: #000000;
	--sym-color-white: #ffffff;
	--sym-color-addi: #2466ff;            /* azul Addi: solo fondos/logos con texto blanco */
	--sym-color-addi-text: #1f57d6;       /* azul Addi para texto sobre blanco o gris */
	--sym-color-addi-soft: #eaf0ff;

	/* ---------- Neutros (gris frío, base #F2F4F4) ---------- */
	--sym-color-neutral-0: #ffffff;
	--sym-color-neutral-50: #f7f8f8;
	--sym-color-neutral-100: #f2f4f4;     /* gris claro de marca */
	--sym-color-neutral-200: #e3e6e6;     /* bordes suaves, separadores */
	--sym-color-neutral-300: #c9cece;     /* bordes de campos */
	--sym-color-neutral-400: #9aa1a1;     /* decorativo, no para texto */
	--sym-color-neutral-500: #5e6565;     /* texto secundario (AA) */
	--sym-color-neutral-600: #4e5454;
	--sym-color-neutral-700: #373b3b;
	--sym-color-neutral-800: #222525;
	--sym-color-neutral-900: #111313;
	--sym-color-neutral-1000: #000000;

	/* ---------- Semánticos ---------- */
	--sym-color-success: #1e7b34;         /* disponible, envío gratis, recogida en tienda */
	--sym-color-success-soft: #e8f5eb;
	--sym-color-danger: #c62828;          /* agotado, errores, precio de oferta */
	--sym-color-danger-strong: #b3261e;
	--sym-color-danger-soft: #fdecea;
	--sym-color-info: var(--sym-color-addi-text); /* información, cuotas con Addi */
	--sym-color-info-soft: var(--sym-color-addi-soft);

	/* ---------- Colores de uso (alias; los componentes usan estos) ---------- */
	--sym-color-bg: var(--sym-color-white);
	--sym-color-bg-subtle: var(--sym-color-neutral-100);
	--sym-color-bg-inverse: var(--sym-color-black);
	--sym-color-text: var(--sym-color-neutral-900);
	--sym-color-text-muted: var(--sym-color-neutral-500);
	--sym-color-text-inverse: var(--sym-color-white);
	--sym-color-border: var(--sym-color-neutral-200);
	--sym-color-border-strong: var(--sym-color-neutral-300);
	--sym-color-accent: var(--sym-color-yellow);
	--sym-color-on-accent: var(--sym-color-black); /* texto sobre amarillo: SIEMPRE negro */
	--sym-color-price: var(--sym-color-neutral-900);
	--sym-color-price-sale: var(--sym-color-danger);
	--sym-color-price-regular: var(--sym-color-neutral-500); /* precio tachado */

	/* ---------- Tipografía ---------- */
	/* Koulen solo tiene peso 400 y solo mayúsculas: usar en titulares cortos, botones y precios grandes. */
	--sym-font-display: "Koulen", "Impact", "Arial Narrow", system-ui, sans-serif;
	--sym-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sym-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Escala fluida 360 px → 1440 px (mobile-first). */
	--sym-font-size-xs: 0.75rem;                                   /* 12 px: notas legales, contadores */
	--sym-font-size-sm: 0.875rem;                                  /* 14 px: metadatos, insignias */
	--sym-font-size-base: 1rem;                                    /* 16 px: cuerpo (nunca menos en campos: evita zoom en iOS) */
	--sym-font-size-md: clamp(1.0625rem, 1rem + 0.278vw, 1.25rem); /* 17 → 20 px */
	--sym-font-size-lg: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem); /* 20 → 24 px */
	--sym-font-size-xl: clamp(1.5rem, 1.333rem + 0.741vw, 2rem);   /* 24 → 32 px */
	--sym-font-size-2xl: clamp(1.75rem, 1.458rem + 1.3vw, 2.625rem); /* 28 → 42 px */
	--sym-font-size-3xl: clamp(2.125rem, 1.667rem + 2.04vw, 3.5rem); /* 34 → 56 px */

	--sym-font-weight-regular: 400;
	--sym-font-weight-medium: 500;
	--sym-font-weight-semibold: 600;
	--sym-font-weight-bold: 700;

	--sym-line-height-tight: 1.1;   /* display */
	--sym-line-height-snug: 1.3;    /* títulos de tarjeta */
	--sym-line-height-base: 1.55;   /* cuerpo */
	--sym-letter-spacing-display: 0.02em;

	/* ---------- Espaciado (escala de 4 px) ---------- */
	--sym-space-0: 0;
	--sym-space-1: 0.25rem;  /* 4 */
	--sym-space-2: 0.5rem;   /* 8 */
	--sym-space-3: 0.75rem;  /* 12 */
	--sym-space-4: 1rem;     /* 16 */
	--sym-space-5: 1.5rem;   /* 24 */
	--sym-space-6: 2rem;     /* 32 */
	--sym-space-7: 3rem;     /* 48 */
	--sym-space-8: 4rem;     /* 64 */
	--sym-space-gutter: clamp(1rem, 0.6667rem + 1.48vw, 2rem);    /* margen lateral 16 → 32 px */
	--sym-space-section: clamp(2.5rem, 1.667rem + 3.7vw, 5rem);   /* separación entre secciones 40 → 80 px */
	--sym-container-max: 82.5rem;                                 /* 1320 px */
	--sym-tap-target: 2.75rem;                                    /* 44 px: área táctil mínima */

	/* ---------- Radios ---------- */
	--sym-radius-sm: 4px;     /* insignias, campos */
	--sym-radius-md: 8px;     /* botones, tarjetas */
	--sym-radius-lg: 16px;    /* paneles, galería */
	--sym-radius-pill: 999px; /* chips, swatches */

	/* ---------- Sombras ---------- */
	--sym-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
	--sym-shadow-md: 0 4px 12px rgb(0 0 0 / 0.1);
	--sym-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.16);
	--sym-shadow-sticky: 0 -4px 16px rgb(0 0 0 / 0.12); /* barra fija inferior */

	/* ---------- Foco accesible ---------- */
	/* Doble anillo (negro + amarillo) visible sobre blanco, gris, negro y amarillo. */
	--sym-focus-ring: 0 0 0 2px var(--sym-color-white), 0 0 0 4px var(--sym-color-black), 0 0 0 6px var(--sym-color-yellow);
	--sym-focus-outline: 2px solid var(--sym-color-black);
	--sym-focus-offset: 2px;

	/* ---------- Capas ---------- */
	--sym-z-base: 1;
	--sym-z-sticky: 100;     /* barra de compra fija */
	--sym-z-header: 200;
	--sym-z-overlay: 900;    /* fondos de menú/modal */
	--sym-z-modal: 1000;
	--sym-z-toast: 1100;
	/* Joinchat (WhatsApp) usa su propio z-index alto: la barra fija deja espacio abajo a la derecha. */

	/* ---------- Movimiento ---------- */
	--sym-motion-fast: 120ms;
	--sym-motion-base: 200ms;
	--sym-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sym-motion-fast: 0ms;
		--sym-motion-base: 0ms;
	}
}