/* Pico de Gallo — Design tokens
   Extraidos del Figma "Web_PDG" (frame Home, node 4:2) via Figma MCP. */
:root {
  /* Color */
  --color-bg: #000000;
  --color-bg-elevated: #111111;
  --color-text: #ffffff;
  --color-text-muted: #5e5e5e;
  --color-text-soft: #989898;
  --color-button-bg: #5e5e5e;
  --color-border: #2b2b2b;
  --color-header-on-light: #000000;
  --color-focus: #ffffff;

  /* Tipografia (cambio de marca 2026-06-26): el cliente sustituyo las
     tipografias del proyecto - Figma ya usa "Lora:Regular" (antes
     "Georgia:Regular") en los titulos y "Libre Franklin:Regular" (antes
     "Early Sans Variable", que nunca llego a tener archivo real) en el
     cuerpo de texto, verificado nodo por nodo via get_design_context
     (Nosotros, Servicios, Contacto, Proyectos, etc. - todos ya devuelven
     Lora/Libre Franklin, no quedan referencias a Georgia/Early Sans en
     el Figma actual). Archivos .ttf reales facilitados por el cliente en
     brief/fonts/, activados via @font-face mas abajo. */
  --font-display: "Lora", "Times New Roman", serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;

  /* Escala tipografica (clamp = fluido entre mobile y desktop).
     HT-01 (recalibrado 2026-06-24): el Figma de este proyecto es un frame
     fijo de 1280px (sin breakpoints definidos), pero los coeficientes de
     vw originales no alcanzaban el valor maximo hasta viewports de
     ~1400-1800px - es decir, ni siquiera a 1280px (la referencia real del
     diseno) se llegaba al valor exacto de Figma, y la mayoria de pantallas
     de escritorio reales (1280-1440px) quedaban por debajo de lo previsto.
     Los coeficientes de abajo estan recalculados para que el valor
     PREFERRED del clamp() sea exactamente el valor de Figma a 1280px de
     viewport (formula: vw_coef = (target_px - rem_offset_px) / 12.8),
     manteniendo el mismo piso movil y el mismo techo de antes. */
  --text-display-xl: clamp(2.75rem, 5.625vw + 1.5rem, 6rem);   /* 96px a 1280px */
  --text-display-lg: clamp(2.25rem, 4.375vw + 1rem, 4.5rem);   /* 72px a 1280px */
  --text-display-md: clamp(1.75rem, 3.75vw + 1rem, 4rem);      /* 64px a 1280px */
  --text-heading: clamp(1.375rem, 1.25vw + 1rem, 2rem);        /* 32px a 1280px */
  --text-body-lg: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);   /* 16-18px */
  /* Cambio de marca 2026-06-26: Figma subio el cuerpo legal del footer
     (1:702/1:704 y equivalentes en las 6 paginas de detalle) de 14px a
     16px - usado tambien por .project-entry__description de Home (la
     ficha de Wanderlust tambien pasa a 16px, ya sin excepcion). */
  --text-body: 1rem;                                        /* 16px */
  --text-nav: 1rem;                                         /* 16px (subido +2px, peticion cliente 2026-07-16), solo header (footer ya no usa este token, ver layout.css) */

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --content-max: 1280px;
  --content-padding: 50px;
  --header-height: 77px; /* Figma: top 26px + alto del lockup de logo 51px */

  /* Movimiento */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
}

/* ---------- Lora / Libre Franklin (cambio de marca 2026-06-26) ----------
   Archivos .ttf reales del cliente, copiados a assets/fonts/. Solo se
   activan los pesos realmente usados en el sitio (verificado: el unico
   font-weight numerico de todo el CSS es 600, en .project-entry__title/
   __category - el resto es siempre "normal"/400). */
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/LibreFranklin-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/LibreFranklin-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}