/* ================================
   variables.css — Mascotas Ayacucho
   Paleta: FF0000, 000000, 9E1F78, 0AC5CA, FFB600
   Compat: WP 6.8 · Woo 10.x · PHP 8.4
   Debe cargarse ANTES de palette.css
   ================================ */

   :root{
    /* 🎨 Base atómica (paleta) */
    --ma-red-500:    #FF0000;   /* principal */
    --ma-black:      #000000;   /* texto fuerte / neutro oscuro */
    --ma-purple-600: #9E1F78;   /* secundario */
    --ma-teal-500:   #0AC5CA;   /* soporte */
    --ma-amber-500:  #FFB600;   /* acento */
    --ma-white:      #FFFFFF;
  
    /* Derivados suaves (fondos) */
    --ma-red-050:    #FFF0F0;
    --ma-purple-050: #F6EAF6;
    --ma-teal-050:   #E9FBFD;
    --ma-amber-050:  #FFF7E0;
  
    /* 📌 Tokens semánticos (base) */
    --brand:            var(--ma-red-500);
    --brand-contrast:   var(--ma-white);
    --accent:           var(--ma-amber-500);
    --accent-contrast:  var(--ma-black);
    --support:          var(--ma-teal-500);
    --support-contrast: var(--ma-black);
  
    --neutral-900:      var(--ma-black);
    --neutral-000:      var(--ma-white);
  
    /* 🔁 Derivados para estados/hover (con fallbacks) */
    --brand-600:    color-mix(in srgb, var(--brand) 78%, #000);
    --brand-600-fallback:  #CC0000;
  
    --accent-600:   color-mix(in srgb, var(--accent) 72%, #000);
    --accent-600-fallback: #CC9200;
  
    --support-600:  color-mix(in srgb, var(--support) 68%, #000);
    --support-600-fallback:#089EA2;
  
    /* 🎯 UI generales */
    --color-borde:   #e5e7eb;
    --color-exito:   #4caf50;
    --color-alerta:  var(--ma-amber-500);
    --color-error:   #f44336;
  
    /* 🖋️ Tipografía */
    --fuente-base:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fuente-titulos: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  
    /* 📏 Tamaños */
    --font-xs:  .8rem;
    --font-sm:  .9rem;
    --font-md:  1rem;
    --font-lg:  1.25rem;
    --font-xl:  1.5rem;
    --font-xxl: 2rem;
  
    /* ⌛ Espaciados */
    --espacio-xxs: 4px;
    --espacio-xs:  8px;
    --espacio-sm:  12px;
    --espacio-md:  16px;
    --espacio-lg:  24px;
    --espacio-xl:  32px;
    --espacio-xxl: 48px;
  
    /* 🖼️ Radios */
    --radio-sm:   6px;
    --radio-md:   12px;
    --radio-lg:   20px;
    --radio-round:50%;
  
    /* 🌑 Sombras */
    --sombra-sm: 0 1px 3px rgba(0,0,0,.12);
    --sombra-md: 0 3px 6px rgba(0,0,0,.16);
    --sombra-lg: 0 8px 16px rgba(0,0,0,.20);
  
    /* ✨ Accesibilidad (focus) */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, #fff);
    --focus-ring-fallback: 0 0 0 3px rgba(255,0,0,.35);
  
    /* ✅ Compat nombres anteriores del tema */
    --color-primario:    var(--brand);
    --color-secundario:  var(--support);
    --color-acento:      var(--accent);
    --color-fondo:       var(--neutral-000);
    --color-fondo-alt:   var(--ma-red-050);
    --color-texto:       var(--neutral-900);
    --color-texto-claro: var(--neutral-000);
  
    /* 🧩 Alias Woo/temas que lean custom props */
    --wc-primary:     var(--brand);
    --wc-on-primary:  var(--brand-contrast);
    --wc-accent:      var(--accent);
    --wc-on-accent:   var(--accent-contrast);
  }
  
  /* ------------------------------
     Botones base (compat global)
     Nota: palette.css refuerza estilos Woo con la misma paleta.
     ------------------------------ */
  .btn,
  .button,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .add_to_cart_button,
  .single_add_to_cart_button{
    --_bg: var(--brand);
    --_fg: var(--brand-contrast);
    background-color: var(--_bg);
    color: var(--_fg);
    border: none;
    border-radius: var(--radio-md);
    transition: background-color .15s ease, transform .15s ease;
    font-family: var(--fuente-base);
  }
  
  /* Modificadores */
  .btn--accent { --_bg: var(--accent);  --_fg: var(--accent-contrast); }
  .btn--alt    { --_bg: var(--support); --_fg: var(--support-contrast); }
  
  /* Hover con respeto al modificador y con fallback */
  @media (hover:hover){
    @supports (color: color-mix(in srgb, black 10%, white)){
      .btn:hover,
      .button:hover,
      .wp-block-button__link:hover,
      .woocommerce a.button:hover,
      .woocommerce button.button:hover,
      .woocommerce input.button:hover,
      .add_to_cart_button:hover,
      .single_add_to_cart_button:hover{
        background-color: var(--brand-600);
      }
      .btn--accent:hover{ background-color: var(--accent-600); }
      .btn--alt:hover{    background-color: var(--support-600); }
    }
    @supports not (color: color-mix(in srgb, black 10%, white)){
      .btn:hover,
      .button:hover,
      .wp-block-button__link:hover,
      .woocommerce a.button:hover,
      .woocommerce button.button:hover,
      .woocommerce input.button:hover,
      .add_to_cart_button:hover,
      .single_add_to_cart_button:hover{
        background-color: var(--brand-600-fallback);
      }
      .btn--accent:hover{ background-color: var(--accent-600-fallback); }
      .btn--alt:hover{    background-color: var(--support-600-fallback); }
    }
  }
  
  /* Estados focus accesibles */
  :where(a, button, [role="button"], input, select, textarea):focus-visible{
    outline: none;
    box-shadow: var(--focus-ring);
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    :where(a, button, [role="button"], input, select, textarea):focus-visible{
      box-shadow: var(--focus-ring-fallback);
    }
  }
  
  /* Estado disabled consistente */
  :where(.btn, .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button):disabled,
  :where(.btn, .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button).disabled{
    opacity:.6;
    cursor:not-allowed;
    filter: grayscale(.2);
  }
  
  /* 💨 Preferencias de movimiento: mejor UX y rendimiento */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
  }