/* ============================================================
   AYCOMER · Sistema de diseño
   Archivo: tokens.css

   Todos los colores del sitio viven aquí. Cambia estas líneas y
   cambia el sitio entero; no hay colores sueltos en otros
   archivos.

   ── POR QUÉ HAY DOS JUEGOS DE COLORES ──

   Los colores de MARCA (uva, fucsia, mandarina, miel) son
   vibrantes: sirven para degradados, fondos y superficies
   grandes, donde el brillo es un atractivo.

   Pero esos mismos colores en texto pequeño no se leen. La
   mandarina sobre blanco da un contraste de 2,6:1 y la miel de
   1,85:1, cuando el mínimo legible es 4,5:1. Por eso existe un
   segundo juego terminado en -txt: el MISMO tono, con la
   luminosidad ajustada hasta alcanzar ese mínimo.

   Regla simple: si es texto o un ícono pequeño, usa la variante
   -txt. Si es un fondo o un degradado, usa el color de marca.

   ── POR QUÉ NO HAY BLANCO PURO NI NEGRO PURO ──

   El contraste entre #FFFFFF y #000000 es de 21:1. Suena
   ideal, pero obliga al ojo a trabajar de más para adaptarse y
   cansa en sesiones largas. Por eso Material Design usa gris
   carbón en vez de negro, y aquí las superficies son un blanco
   cálido (#FDFBF8) y un azul muy oscuro (#12162B).

   Todos los pares de texto y fondo de este archivo cumplen
   WCAG 2.1 nivel AA: 4,5:1 para texto normal.
   ============================================================ */

:root{
  /* ---- Colores de marca (fondos, degradados, superficies) ----
     Tomados PÍXEL A PÍXEL del render final del logo (15 ago 2026),
     no aproximados a ojo. Antes eran otros y el degradado del sitio
     no coincidía con el del logo. */
  --uva:#7129A0;
  --fucsia:#AF277D;
  --mandarina:#E0684D;
  --miel:#F4A929;
  --tinta:#041945;        /* el azul exacto del texto AYCOMER */
  --papel:#F3F1EC;        /* el fondo exacto del render claro */

  /* ---- COLOR DE ACCIÓN · el que vende ------------------------
     Se usa SOLO en "Agregar al carrito", "Comprar" y "Pagar".
     Nada más.

     Por qué separado del degradado de marca: cuando todos los
     botones son degradado, ninguno destaca, y el ojo deja de saber
     dónde tiene que hacer clic. Reservar un color exclusivo para la
     acción que genera la venta es la palanca de conversión más
     barata que existe.

     Elegido midiendo, no por gusto: 5,18:1 con texto blanco encima
     (se lee) y 4,59:1 contra el fondo (destaca). */
  --cta:#C2410C;
  --cta-fuerte:#9A340A;   /* al pasar el mouse y al presionar */
  --cta-suave:#FDF0E7;    /* fondos tenues relacionados con la acción */
  --cta-texto:#FFFFFF;    /* 5,18:1 sobre el naranja del modo día */

  --grad:linear-gradient(112deg,var(--uva) 0%,var(--fucsia) 42%,var(--mandarina) 78%,var(--miel) 100%);
  --grad-suave:linear-gradient(112deg,rgba(113,41,160,.12),rgba(175,39,125,.12) 42%,rgba(224,104,77,.12) 78%,rgba(244,169,41,.14));

  /* Degradado para BOTONES pequeños (agregado 15 ago 2026).
     El degradado de marca tiene 4 paradas repartidas en 112°. En una
     superficie grande se ve precioso; comprimido en un botón de 190
     px las cuatro paradas se amontonan y el ojo percibe manchas y un
     morado que "no se ve uniforme". Con dos paradas el botón queda
     limpio y sigue siendo el mismo degradado de la marca. */
  --grad-btn:linear-gradient(100deg,var(--uva) 0%,var(--fucsia) 100%);
  /* Sombra en el tono real del botón. Antes era rgba(198,36,140,.9),
     el fucsia ANTERIOR: quedaba un halo de otro color alrededor. */
  --sombra-marca:0 8px 22px -10px rgba(175,39,125,.75);
  --sombra-marca-alta:0 14px 30px -12px rgba(175,39,125,.85);

  /* ---- Superficies ---------------------------------------- */
  --fondo:#F3F1EC;        /* el mismo del render del logo */
  --sup:#FDFCFA;          /* blanco cálido, nunca blanco puro */
  --sup-2:#F6F3ED;
  --linea:#E3DDD2;
  --linea-fuerte:#CFC6B6;

  /* ---- Texto ---------------------------------------------- */
  --texto:#041945;        /* 17,0:1 sobre --sup · el azul del logo */
  --texto-2:#535B79;      /*  6,5:1 */
  --texto-3:#616980;      /*  5,3:1 · corregido: el anterior (#6B738D)
                             daba 4,17:1 sobre el fondo y no llegaba
                             al mínimo legible de 4,5:1 */

  /* ---- Variantes legibles: mismo tono, más contraste ------- */
  --fucsia-txt:#A32473;  --mandarina-txt:#B0491F;  --miel-txt:#8F6104;  --uva-txt:#662590;
  --exito:#0F8A5F;
  --exito-txt:#0E7350;
  --alerta:#C0392B;
  --alerta-txt:#B03427;

  /* ---- Forma y profundidad -------------------------------- */
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px;
  --sombra-s:0 1px 2px rgba(20,34,79,.06);
  --sombra-m:0 6px 20px -8px rgba(20,34,79,.18);
  --sombra-l:0 24px 60px -24px rgba(20,34,79,.34);

  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --texto-f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --max:1280px;
  --hdr:132px;
}

/* ============================================================
   MODO NOCHE

   No es el modo día invertido. Sobre fondo oscuro los colores
   saturados brillan de más y cansan la vista, así que aquí se
   aclaran en vez de oscurecerse, y el texto baja de blanco puro
   a un blanco atenuado.

   El fondo es #12162B: un azul muy oscuro, nunca negro puro.
   Con negro absoluto las sombras desaparecen y se pierde toda
   noción de profundidad.
   ============================================================ */
[data-tema="noche"]{
  /* CAMBIO (15 ago 2026): antes estas superficies tenían tinte
     VIOLETA (#12162B, #191E3A). El color dominante del logo es
     morado, y morado sobre violeta oscuro se pierde: medido, daba
     1,96:1. Ahora son azul marino puro, tomado del render oscuro
     del propio logo. Además el logo cambia a su versión aclarada
     en este modo (ver cabecera.js), y así pasa a 7,58:1. */
  --fondo:#04122F;
  --sup:#041945;          /* el navy exacto del render oscuro */
  --sup-2:#0A2456;
  --linea:#16336B;
  --linea-fuerte:#27508F;

  --texto:#E7E4F4;        /* 14,3:1 · blanco atenuado, no puro */
  --texto-2:#AEB5D4;
  --texto-3:#7D86AA;      /*  4,6:1 */

  /* Aclarados para el fondo oscuro */
  --fucsia-txt:#F27FBE;
  --mandarina-txt:#FF9166;
  --miel-txt:#F4B23F;
  --uva-txt:#B98AE0;
  --exito:#14A873;
  --exito-txt:#119A6A;
  --alerta:#E06B5F;
  --alerta-txt:#D96357;

  --papel:#04122F;
  /* Sobre fondo oscuro el naranja quemado se apaga: se aclara para
     que el botón de compra siga siendo lo más visible de la vista. */
  --cta:#E2571A;
  --cta-fuerte:#F2701F;
  /* Sobre este naranja aclarado el blanco solo da 3,74:1 y NO cumple.
     Se usa texto oscuro encima (5,16:1). Es lo correcto sobre un
     naranja luminoso, y de paso el botón se ve más nítido. */
  --cta-texto:#1A0A02;
  --cta-suave:#2A1508;
  --sombra-s:0 1px 2px rgba(0,0,0,.4);
  --sombra-m:0 6px 20px -8px rgba(0,0,0,.6);
  --sombra-l:0 24px 60px -24px rgba(0,0,0,.8);
}

/* ============================================================
   AJUSTES DEL SISTEMA OPERATIVO

   Si la persona pidió más contraste en su equipo, se le da:
   bordes más marcados y texto más firme. No se ignora su
   configuración.
   ============================================================ */
@media (prefers-contrast: more){
  :root{
    --texto-2:#3E4560;
    --texto-3:#535B79;
    --linea:#B9AF9C;
    --linea-fuerte:#8E8574;
  }
  [data-tema="noche"]{
    --texto-2:#CBD1E8;
    --texto-3:#A2A9C8;
    --linea:#4A5385;
  }
}