/* =========================================================================
   GadgetsMty — tokens de diseño
   Solo variables. Sin selectores de componentes, sin reglas de layout.
   Si vas a escribir un selector, va en gadgetsmty.css, no aquí.
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     MARCA
     Hex aproximados, muestreados del logo en JPG.
     PENDIENTE: afinar con el archivo vectorial (SVG/AI) del logo.
     --------------------------------------------------------------------- */

  --gm-lima:          #7CE04A;  /* el verde del "Mty" */
  --gm-verde:         #3FBF3C;  /* verde sólido de la marca */
  --gm-verde-oscuro:  #217A20;  /* ver nota de contraste abajo */

  --gm-lima-hover:    #8BE84F;
  --gm-verde-hover:   #35A332;

  --gm-gradiente:     linear-gradient(135deg, #3FBF3C 0%, #8BE84F 100%);

  /* ---------------------------------------------------------------------
     NOTA DE CONTRASTE — leer antes de usar los verdes

     Sobre fondo BLANCO, ninguno de los dos verdes de marca alcanza el
     mínimo WCAG AA para texto (4.5:1):

        #7CE04A sobre blanco  ->  ~1.9:1   NO
        #3FBF3C sobre blanco  ->  ~2.3:1   NO
        #217A20 sobre blanco  ->  ~5.1:1   SÍ

     Por eso existe --gm-verde-oscuro. Regla práctica:

        Texto y enlaces sobre blanco ....... --gm-verde-oscuro
        Rellenos, iconos, bordes, barras ... --gm-verde / --gm-lima
        Texto sobre fondo oscuro ........... --gm-lima  (~12:1, excelente)
        Botón de acción .................... fondo --gm-lima + texto --gm-negro (~12:1)

     El botón lima con texto negro no es un parche de accesibilidad: es la
     misma relación que usa el logo (fondo oscuro, letras lima, invertida).
     --------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------
     NEUTROS OSCUROS — header, barra de categorías, hero, footer
     --------------------------------------------------------------------- */

  --gm-negro:         #121316;  /* el fondo del logo */
  --gm-superficie:    #1C1E22;  /* cards y bloques sobre el negro */
  --gm-superficie-2:  #24272C;
  --gm-borde-osc:     #2A2D33;
  --gm-texto-osc:     #E8EAED;  /* texto sobre fondo oscuro */
  --gm-texto-osc-2:   #9BA1A9;  /* secundario sobre fondo oscuro */

  /* ---------------------------------------------------------------------
     NEUTROS CLAROS — catálogo, ficha, carrito, checkout
     --------------------------------------------------------------------- */

  --gm-blanco:        #FFFFFF;
  --gm-gris-fondo:    #F5F6F7;
  --gm-gris-2:        #EDEFF1;
  --gm-borde:         #E3E6E8;
  --gm-texto:         #16181B;
  --gm-texto-suave:   #6B7280;
  --gm-texto-tenue:   #9AA1A9;

  /* ---------------------------------------------------------------------
     FUNCIONALES DE TIENDA
     --gm-oferta se usa SOLO en precios rebajados y badges de descuento.
     Si se usa para otra cosa, deja de significar "oferta".
     --------------------------------------------------------------------- */

  --gm-oferta:        #E5322D;
  --gm-oferta-fondo:  #FDECEB;
  --gm-estrella:      #FFC107;
  --gm-exito:         #1E7F3C;
  --gm-exito-fondo:   #E8F5EC;
  --gm-aviso:         #B26A00;
  --gm-aviso-fondo:   #FFF6E5;
  --gm-info:          #1B6FC4;
  --gm-info-fondo:    #E8F1FB;

  /* ---------------------------------------------------------------------
     TIPOGRAFÍA
     La familia real se define en el Personalizador de Blocksy, no aquí.
     Estos tokens solo heredan de Blocksy con un respaldo del sistema.
     --------------------------------------------------------------------- */

  --gm-font: var(--theme-font-family, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

  --gm-txt-xs:   0.75rem;   /* 12px — meta, SKU, migas */
  --gm-txt-sm:   0.875rem;  /* 14px — título de tarjeta de producto */
  --gm-txt-base: 1rem;      /* 16px — cuerpo */
  --gm-txt-lg:   1.125rem;  /* 18px */
  --gm-txt-xl:   1.375rem;  /* 22px — precio en tarjeta */
  --gm-txt-2xl:  1.75rem;   /* 28px — título de sección */
  --gm-txt-3xl:  2.25rem;   /* 36px — precio en ficha */

  --gm-peso-normal:  400;
  --gm-peso-medio:   500;
  --gm-peso-semi:    600;
  --gm-peso-bold:    700;

  --gm-interlineado-apretado: 1.25;
  --gm-interlineado:          1.5;

  /* ---------------------------------------------------------------------
     ESPACIADO — escala de 4px
     --------------------------------------------------------------------- */

  --gm-esp-1:   0.25rem;
  --gm-esp-2:   0.5rem;
  --gm-esp-3:   0.75rem;
  --gm-esp-4:   1rem;
  --gm-esp-5:   1.25rem;
  --gm-esp-6:   1.5rem;
  --gm-esp-8:   2rem;
  --gm-esp-10:  2.5rem;
  --gm-esp-12:  3rem;
  --gm-esp-16:  4rem;

  /* ---------------------------------------------------------------------
     BORDES, SOMBRAS Y CAPAS
     --------------------------------------------------------------------- */

  --gm-radio-sm:   4px;
  --gm-radio:      8px;
  --gm-radio-lg:   12px;
  --gm-radio-full: 999px;

  --gm-sombra-sm:  0 1px 2px rgba(18, 19, 22, 0.06);
  --gm-sombra:     0 2px 8px rgba(18, 19, 22, 0.08);
  --gm-sombra-lg:  0 8px 24px rgba(18, 19, 22, 0.12);

  --gm-z-dropdown: 100;
  --gm-z-sticky:   200;
  --gm-z-overlay:  300;
  --gm-z-modal:    400;

  --gm-transicion: 0.18s ease;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */

  /* 1320 px es el ancho contra el que se diseñaron las cuatro maquetas.
     Este valor y el del Personalizador de Blocksy tienen que ser el mismo:
     si no, el contenido del tema y el de las maquetas no cuadran. */
  --gm-ancho-max:   1320px;
  --gm-alto-header: 72px;
  --gm-alto-topbar: 36px;
}

/* -------------------------------------------------------------------------
   MODO OSCURO
   No lo activamos todavía. El sitio es claro en catálogo y oscuro en
   header/footer por diseño (§11 del plan), que no es lo mismo que un
   modo oscuro real. Si algún día se implementa, los overrides van aquí.
   ------------------------------------------------------------------------- */