@charset "utf-8";

/* Variables globales — subconjunto de modules/neobookings.css necesario
   para logo, claim, hero slider y máscara de reserva. */

/* Hanken Grotesk: tipografía general del sitio (--font-text-family).
   Cormorant Garamond queda reservada al claim (--font-title-family). */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../../fonts/hanken-grotesk/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond no tiene weight 900 (peso máximo estático: 700);
   el título del claim usa 700 como equivalente más cercano. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-white: #fff;
  --color-black: #26221e;
  --color-filter-icon-white: invert(100%) sepia(0%) saturate(7482%)
    hue-rotate(35deg) brightness(103%) contrast(93%);

  /* Color grey: #f8f8f8 */
  --grey-l: 96%;
  --color-grey: hsl(0, 0%, var(--grey-l));

  --middle-grey-l: 88%;
  --color-middle-grey: hsl(0, 0%, var(--middle-grey-l));

  --dark-grey-l: 56%;
  --color-dark-grey: hsl(0, 0%, var(--dark-grey-l));

  /* Color primary: #739eba */
  --primary-h: 147;
  --primary-s: 50%;
  --primary-l: 36%;
  --color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hover-h: 153;
  --primary-hover-s: 59%;
  --primary-hover-l: 26%;
  --color-primary-hover: hsl(var(--primary-hover-h), var(--primary-hover-s), var(--primary-hover-l));

  /* WCAG 1.4.3 — variante oscura para CTAs con texto blanco. */
  --color-cta: var(--color-primary);
  --color-cta-hover: var(--color-primary-hover);

  /* Escala tipográfica fluida del claim (320–1280px de viewport). */
  --fs-display: clamp(3rem, 2.6667rem + 1.6667vw, 4rem);
  --fs-heading-1: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);

  --font-text-size: 16px;
  --font-text-family: "Hanken Grotesk";
  --font-title-family: "Cormorant Garamond";

  --container-width: 1170px;
  --space-between-sections: 100px;
}

@media (max-width: 922px) {
  :root {
    --space-between-sections: 50px;
    --font-text-size: 16px;
  }
}