/**
 * Sistema de Diseño — Tokens (Prosingladura / Yoo Extras)
 * =======================================================
 * Variables CSS globales que consolidan la identidad visual REAL del sitio
 * (auditada del tema Merto y de los módulos propios). Úsalas en TODO el CSS
 * nuevo para mantener coherencia. NO redefinas colores/medidas a mano.
 *
 * Convención de prefijo: --yoo-  (no choca con las --ts-* del tema).
 *
 * Documentación y guía de uso: DOC/DESIGN-SYSTEM.md
 */

:root {
    /* ===========================================================
     * 1. COLOR
     * =========================================================== */

    /* Marca — azul principal (#125bc9, el más usado del sitio) */
    --yoo-color-primary:        #125bc9;
    --yoo-color-primary-hover:  #0f4ea8;
    --yoo-color-primary-active: #0d47a1;
    --yoo-color-primary-soft:   #eaf1fd;  /* fondo azul claro (hover/activo suave) */
    --yoo-color-primary-contrast: #ffffff;

    /* Acentos secundarios (usados en estados puntuales de la tienda) */
    --yoo-color-accent:   #ff6b35;  /* naranja: "categoría activa" en el grid */
    --yoo-color-accent-soft: #fff0eb;  /* naranja muy claro: fondo de chips "activa" */
    --yoo-color-warning:  #ffc107;  /* amarillo: avisos */

    /* Estado */
    --yoo-color-success:  #2e7d32;
    --yoo-color-danger:   #b42318;
    --yoo-color-info:     var(--yoo-color-primary);

    /* Texto (escala gris real del sitio) */
    --yoo-color-text:         #1a1a1a;  /* títulos / texto fuerte */
    --yoo-color-text-body:    #333333;  /* cuerpo */
    --yoo-color-text-muted:   #6b7280;  /* secundario */
    --yoo-color-text-subtle:  #8a8f98;  /* contadores, placeholders */
    --yoo-color-text-inverse: #ffffff;  /* texto sobre fondos oscuros/scrim */

    /* Scrim: velo oscuro sobre imágenes cuando llevan contenido superpuesto.
       Alpha .62 garantiza ≥4.5:1 con texto inverso incluso sobre foto blanca. */
    --yoo-color-scrim: rgba(13, 18, 28, .62);
    --yoo-color-line-inverse: rgba(255, 255, 255, .25);  /* separadores sobre scrim/fondo oscuro */

    /* Superficies y líneas */
    --yoo-color-surface:        #ffffff;
    --yoo-color-surface-2:      #f3f5f9;  /* fondos suaves (pills, chips) */
    --yoo-color-surface-3:      #f5f6f8;
    --yoo-color-line:           #e9ecf1;  /* bordes/separadores */
    --yoo-color-line-strong:    #d4d8e0;

    /* ===========================================================
     * 2. TIPOGRAFÍA  (hereda la familia del tema vía --ts-font-family)
     * =========================================================== */
    --yoo-font-family: var(--ts-font-family, inherit);

    --yoo-font-size-xs:   11px;
    --yoo-font-size-sm:   13px;
    --yoo-font-size-base: 14px;
    --yoo-font-size-md:   15px;
    --yoo-font-size-lg:   18px;
    --yoo-font-size-xl:   22px;

    --yoo-font-weight-normal:   400;
    --yoo-font-weight-medium:   500;
    --yoo-font-weight-semibold: 600;
    --yoo-font-weight-bold:     700;

    --yoo-line-height-tight: 1.2;
    --yoo-line-height-base:  1.5;

    /* ===========================================================
     * 3. ESPACIADO  (escala de 4px, la más recurrente en el sitio)
     * =========================================================== */
    --yoo-space-1: 4px;
    --yoo-space-2: 8px;
    --yoo-space-3: 12px;
    --yoo-space-4: 16px;
    --yoo-space-5: 20px;
    --yoo-space-6: 24px;
    --yoo-space-8: 32px;
    --yoo-space-10: 40px;

    /* ===========================================================
     * 4. RADIOS  (valores reales: 4/6/8/12 y pill)
     * =========================================================== */
    --yoo-radius-xs:   4px;
    --yoo-radius-sm:   6px;
    --yoo-radius-md:   8px;
    --yoo-radius-lg:   12px;
    --yoo-radius-xl:   14px;
    --yoo-radius-pill: 999px;
    --yoo-radius-circle: 50%;

    /* ===========================================================
     * 5. SOMBRAS
     * =========================================================== */
    --yoo-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --yoo-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
    --yoo-shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
    --yoo-shadow-lg: 0 16px 44px rgba(16, 24, 40, .18);
    --yoo-shadow-primary: 0 4px 12px rgba(18, 91, 201, .35);

    /* ===========================================================
     * 6. MOVIMIENTO
     * =========================================================== */
    --yoo-transition-fast: .16s ease;
    --yoo-transition-base: .22s ease;
    --yoo-ease-in-out: cubic-bezier(.4, 0, .2, 1);  /* easing para pulsos/loops */
    --yoo-dur-fast: .16s;  /* salidas / feedback inmediato */
    --yoo-dur-base: .22s;  /* entradas / transiciones de estado */

    /* ===========================================================
     * 7. ICONOS (Lucide)  — tamaños recomendados
     * =========================================================== */
    --yoo-icon-sm: 16px;
    --yoo-icon-md: 18px;
    --yoo-icon-lg: 22px;

    /* ===========================================================
     * 8. CAPAS (z-index) — escala coherente para evitar guerras de z-index
     * =========================================================== */
    --yoo-z-base:     1;
    --yoo-z-sticky:   995;   /* barras sticky propias (bajo el header del tema) */
    --yoo-z-dropdown: 100000;/* mega menús / desplegables que deben ir sobre todo */
    --yoo-z-overlay:  100050;
    --yoo-z-modal:    100100;
}

/* Estilo base del icono Lucide inline (yoo_icon): hereda el color del texto. */
.yoo-icon {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
}