/* ============================================================================
   Es Bassol Nou — Variables globales (custom properties)
   Colores de marca, tipografías, escala tipográfica fluida, spacing,
   contenedor y rejilla. Mobile-first. Unidades métricas / rem.
   ========================================================================== */

:root {
  /* --- Paleta de marca (muestreada de los mockups PDF, bandas planas) ------
     cream: fondo body (About/Services)  sand: superficie cálida
     olive: footer About+Contact         terracota: header Services
     blue:  campo plano Property Care                                        */
  --c-cream:      #f2efe3;   /* fondo principal (crema/hueso) */
  --c-sand:       #dbc5af;   /* superficie cálida (arena) */
  --c-olive:      #9aaa5f;   /* verde oliva */
  --c-terracota:  #b5664d;   /* terracota */
  --c-blue:       #7ba0ae;   /* azul apagado */
  --c-ink:        #13110c;   /* tinta negro-cálido del PDF (medido en nav/footer/wordmark, NO #000 puro) */

  /* Variantes de apoyo */
  --c-cream-2:    #f7f4ea;   /* crema más claro (tarjetas) */
  --c-olive-dk:   #869450;
  --c-terracota-dk: #9e5943;
  --c-blue-dk:    #6c8d99;

  /* --- Roles semánticos --------------------------------------------------- */
  --bg:           var(--c-cream);
  --text:         var(--c-ink);
  --muted:        rgba(43, 42, 38, 0.62);
  --line:         rgba(43, 42, 38, 0.24);  /* hairlines / rejilla vertical */
  --line-soft:    rgba(43, 42, 38, 0.14);

  /* --- Tipografías -------------------------------------------------------- */
  --font-display: "Louize Display", "Times New Roman", Georgia, serif;
  --font-body:    "Neue Haas Unica", system-ui, -apple-system, "Segoe UI",
                  Helvetica, Arial, sans-serif;

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* --- Escala tipográfica (fluida con clamp) ------------------------------
     De cuerpo pequeño a wordmark gigante. min ~360px / max ~1440px.        */
  --fs-label:     0.75rem;                               /* 12px  labels/nav */
  --fs-caption:   0.8125rem;                             /* 13px  pies */
  --fs-body-sm:   0.9375rem;                             /* 15px */
  --fs-body:      clamp(1rem, 0.96rem + 0.2vw, 1.125rem);/* 16→18 */
  --fs-body-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h4:        clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-h3:        clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --fs-h2:        clamp(2.2rem, 1.6rem + 2.8vw, 4rem);
  --fs-h1:        clamp(3rem, 1.8rem + 6vw, 6.5rem);
  --fs-display:   clamp(3.5rem, 1rem + 12vw, 9rem);      /* títulos "OUR PROJECTS" */
  --fs-wordmark:  clamp(3rem, 0.5rem + 13vw, 12rem);     /* wordmark gigante footer/home */

  --lh-tight:   1.02;   /* titulares display */
  --lh-snug:    1.14;
  --lh-normal:  1.5;    /* cuerpo */
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* --- Spacing (escala) --------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  /* separación entre secciones, fluida (ritmo editorial aireado como el mockup) */
  --space-section: clamp(4rem, 2rem + 8vw, 11rem);

  /* --- Contenedor y rejilla ---------------------------------------------- */
  --container:   90rem;     /* 1440px */
  --container-narrow: 60rem;
  --gutter:      clamp(1.25rem, 0.5rem + 4vw, 4rem);
  --grid-cols:   12;

  /* --- Cabecera / capas --------------------------------------------------- */
  --header-h:    clamp(4rem, 3rem + 4vw, 6.5rem);
  --z-header:    100;
  --z-overlay:   200;

  --radius:      2px;
  --transition:  0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Breakpoints de referencia (para media queries en los .css de cada módulo):
   sm  36rem  (576px)
   md  48rem  (768px)   -> layout desktop del header empieza aquí/1024
   lg  64rem  (1024px)
   xl  90rem  (1440px)  -> ancho de contenedor
*/