/* ============================================================
   Tokens de marca - FerreTodo
   Fuente: Manual de marca v3. Ver docs/06-guia-de-marca.md
   No agregar colores ni tipografias fuera de este archivo.
   ============================================================ */

:root{
  /* Paleta de marca */
  --naranja:#F5720C;
  --carbon:#1F2124;
  --gris:#6E747A;
  --blanco:#FFFFFF;

  /* Apoyo de interfaz (derivados, no son colores de marca) */
  --fondo:#F2F1EE;
  --superficie:#FFFFFF;
  --superficie-2:#E9E7E2;
  --linea:#D8D5CE;
  --tinta-suave:#55585D;
  --naranja-oscuro:#7A3705;
  /* Estado de interaccion derivado del naranja de marca. No es un color nuevo:
     solo se usa en hover de botones, nunca en piezas de identidad. */
  --naranja-hover:#DA6509;
  --carbon-2:#26282C;
  --linea-oscura:#34373C;
  --tinta-oscura-suave:#A7ABB1;

  /* Tipografia: una sola familia */
  --fuente:'Poppins',-apple-system,'Segoe UI',sans-serif;
  --peso-titulo:700;
  --peso-apoyo:500;
  --peso-cuerpo:400;
  --tracking-apoyo:.14em;

  /* Forma */
  --radio:14px;
  --radio-chico:10px;
  --sombra:0 1px 2px rgba(31,33,36,.06), 0 8px 24px -12px rgba(31,33,36,.18);
  --sombra-oscura:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  --sombra-alta:0 2px 4px rgba(31,33,36,.08), 0 16px 34px -14px rgba(31,33,36,.26);
  --sombra-flotante:0 10px 26px rgba(31,33,36,.28);

  /* Derivados translucidos de colores de marca, para textura y profundidad.
     Son el mismo fondo y la misma linea con transparencia, no colores nuevos. */
  --fondo-translucido:rgba(242,241,238,.92);
  --linea-tenue:rgba(216,213,206,.55);
  --resplandor-oscuro:radial-gradient(ellipse 80% 60% at 85% 0%, var(--carbon-2) 0%, transparent 70%);
  --cuadricula:linear-gradient(var(--linea-tenue) 1px, transparent 1px) 0 0/32px 32px,
               linear-gradient(90deg, var(--linea-tenue) 1px, transparent 1px) 0 0/32px 32px;

  /* Movimiento */
  --curva-salida:cubic-bezier(.22,1,.36,1);
  --curva-resorte:cubic-bezier(.34,1.4,.64,1);
  --entrada:.6s;

  /* Medidas de interfaz */
  --toque-minimo:44px;            /* alto minimo de todo lo que se toca en el telefono */
  --foco:2px solid var(--naranja);/* anillo de foco con teclado; el color es el de marca */
  --logo-barra:40px;
  --logo-hero:clamp(72px,11vw,112px);
  --reserva-flotante:96px;        /* lo que tapa el boton flotante de WhatsApp en el telefono */
  --transicion:.18s var(--curva-salida);
}