/* ==========================================================================
   Marketplace Custom — TOKENS DE DISEÑO UNIFICADOS (fuente única Rexor)
   Valores canónicos de la identidad de marca. Se cargan en TODO el sitio
   para que colores, tipografía, tamaños, radios y espaciado sean uniformes
   en panel React, tienda, login/registro y tarjetas del vendedor.
   ========================================================================== */

:root {
    /* ----- Colores de marca ----- */
    --rx-green:       #0E3A2F;   /* primario / marca / botón principal */
    --rx-green-dark:  #0A2A22;   /* hover/realce del verde */
    --rx-green-mid:   #1E5546;   /* verde intermedio (hover de botones secundarios) */
    --rx-gold:        #C9A961;   /* acento / precio / bordes destacados */
    --rx-gold-dark:   #B89545;   /* hover del dorado */
    --rx-cream:       #F8F5F0;   /* fondo de página */
    --rx-cream-tint:  #FCF3E3;   /* crema cálida (banner de revisión, estado pendiente) */
    --rx-white:       #FFFFFF;   /* superficies / tarjetas */
    --rx-surface:     #FCFCFC;   /* superficie suave (galería) */
    --rx-dark:        #1A1A1A;   /* títulos y texto principal */
    --rx-muted:       #6B6B6B;   /* texto secundario / descripciones */
    --rx-line:        #E5E0D6;   /* divisores suaves */
    --rx-border:      #A4A4A4;   /* borde de inputs/opciones */
    --rx-ok:          #1B7A47;   /* estados positivos */
    --rx-danger:      #C0392B;   /* errores */

    /* ----- Radios ----- */
    --rx-r-sm:     5px;
    --rx-r:        10px;
    --rx-r-md:     12px;    /* radio medio (tarjetas, modales) */
    --rx-r-img:    16px;
    --rx-r-img-lg: 20px;
    --rx-r-pill:   999px;

    /* ----- Tipografía ----- */
    --rx-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --rx-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --rx-fs-xs:   12.5px;
    --rx-fs-sm:   14px;
    --rx-fs-base: 16px;
    --rx-fs-lg:   20px;
    --rx-fs-xl:   22px;
    --rx-fs-price: 25px;

    /* ----- Espaciado (escala 4) ----- */
    --rx-sp-1: 4px;
    --rx-sp-2: 8px;
    --rx-sp-3: 12px;
    --rx-sp-4: 16px;
    --rx-sp-5: 24px;
    --rx-sp-6: 32px;
    --rx-sp-section: 50px;

    /* ----- Sombras ----- */
    --rx-shadow:       0 6px 22px rgba(14,58,47,.06);   /* sombra de marca (verde suave) */
    --rx-shadow-card:  0 2px 16px rgba(0,0,0,.07);      /* sombra base de tarjeta */
    --rx-shadow-hover: 0 8px 32px rgba(0,0,0,.14);      /* sombra en hover */
    --rx-shadow-focus: 0 0 0 4px rgba(201,169,97,.18);  /* anillo de focus dorado */

    /* ----- Transición estándar ----- */
    --rx-transition: 0.25s cubic-bezier(.4,0,.2,1);
}