/* =================================================================
   INTERPLAY — DESIGN TOKENS
   -----------------------------------------------------------------
   Fuente única de verdad para colores, tipografía, espaciado y layout.
   Cualquier cambio global (un color, un tamaño) se hace AQUÍ y se
   propaga a toda la web. Las plantillas y componentes NUNCA deben
   llevar valores "a pelo": siempre referencian estas variables.

   Derivado de "design-tokens-globales-interplay.pdf".
   Las decisiones marcadas con [ASUNCIÓN] resuelven erratas del PDF y
   están pendientes de tu confirmación.
   ================================================================= */

:root {

	/* ---------------------------------------------------------------
	   COLOR
	   --------------------------------------------------------------- */
	--color-black:      #1E1E1E;   /* Texto principal */
	--color-white:      #FFFFFF;   /* Fondo claro / texto sobre oscuro */
	--color-grey:       #5F6269;   /* interplay-grey: fondo de botones de menú y caja del logo (confirmado) */
	--color-pale-grey:  #F5F5F5;   /* Fondos suaves / separadores */

	/* Fondo "sticky" del menú al hacer scroll (translúcido + desenfoque) */
	--color-sticky-bg:  rgba(255, 255, 255, 0.60);
	--sticky-blur:      6px;

	/* Roles semánticos de color (apuntan a los primitivos de arriba) */
	--text-color:       var(--color-black);
	--bg-color:         var(--color-white);

	/* ---------------------------------------------------------------
	   TIPOGRAFÍA — familia, pesos y tracking
	   --------------------------------------------------------------- */
	--font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--fw-light:     300;
	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;

	--ls-default:   0.5px;   /* letter-spacing por defecto en la mayoría de estilos */

	/* ---------------------------------------------------------------
	   TIPOGRAFÍA — roles
	   -----------------------------------------------------------------
	   Cada token usa la sintaxis abreviada de la propiedad `font`:
	       font-weight  font-size/line-height  font-family
	   Se aplica con:  font: var(--font-xxx);
	   El color y el letter-spacing se aplican aparte (ver utilidades).
	   --------------------------------------------------------------- */

	/* ---- PÁGINA DE PROYECTO ---- */
	--font-project-title:      var(--fw-medium) 80px/72px var(--font-sans); /* H1 */
	--font-project-subtitle:   var(--fw-light)  56px/64px var(--font-sans);
	--font-section-heading:    var(--fw-medium) 64px/80px var(--font-sans); /* H2 encabezados de sección (LH corregido a 80px, confirmado) */
	--font-highlight:          var(--fw-regular) 32px/40px var(--font-sans); /* "Texto destacado" */
	--font-body:               var(--fw-light)  18px/24px var(--font-sans); /* Cuerpo de texto — Inter (confirmado; el "Outfit" del PDF era errata) */
	--font-meta-title:         var(--fw-semibold) 18px/24px var(--font-sans); /* Datos proyecto | Title */
	--font-meta-value:         var(--fw-regular) 18px/24px var(--font-sans); /* Datos proyecto | Subtitle */
	--font-collapse:           var(--fw-light)  16px/24px var(--font-sans); /* Texto desplegable */
	--font-collapse-title:     var(--fw-semibold) 16px/24px var(--font-sans);
	--font-little-button:      var(--fw-medium) 16px/24px var(--font-sans); /* Little button + icon */
	--font-pub-text:           var(--fw-medium) 16px/24px var(--font-sans); /* Publications | text */
	--font-pub-link:           var(--fw-semibold) 18px/24px var(--font-sans); /* Publications | link */
	--font-moreproj-title:     var(--fw-medium) 32px/56px var(--font-sans);
	--font-moreproj-subtitle:  var(--fw-light)  32px/56px var(--font-sans);
	--font-moreproj-text:      var(--fw-light)  16px/24px var(--font-sans);

	/* ---- HOME ---- */
	--font-home-title:         var(--fw-medium) 56px/72px var(--font-sans); /* H1 de la home (más pequeño que el de la ficha) */
	--font-home-subtitle:      var(--fw-light)  48px/72px var(--font-sans);
	--font-main-button:        var(--fw-medium) 20px/24px var(--font-sans);
	--font-outstanding:        var(--fw-medium) 40px/56px var(--font-sans); /* Frase del estudio "We are a European studio…" */
	--font-outstanding-cta:    var(--fw-medium) 80px/104px var(--font-sans); /* "let's talk →" (LH corregido a 104px, confirmado) */
	--font-scroll-link:        var(--fw-semibold) 18px/24px var(--font-sans); /* "scroll down" / "back to top" */

	/* ---- FOOTER ---- */
	--font-footer-link:        var(--fw-medium) 24px/24px var(--font-sans);
	--font-footer-credit:      var(--fw-medium) 16px/24px var(--font-sans);

	/* ---------------------------------------------------------------
	   ESPACIADO — escala de 8 px
	   (todas las medidas del PDF son múltiplos de 8)
	   --------------------------------------------------------------- */
	--space-1:   8px;
	--space-2:   16px;
	--space-3:   24px;
	--space-4:   32px;
	--space-5:   40px;
	--space-6:   56px;
	--space-7:   64px;
	--space-8:   72px;
	--space-9:   80px;
	--space-section: 160px;   /* separación vertical entre secciones (gap del PDF) */
	--section-gap:   120px;   /* [AJUSTABLE] ritmo vertical consistente entre secciones de la ficha */
	--page-top:      400px;   /* [AJUSTABLE] espacio entre el menú y el titular (contact, news) */

	/* ---------------------------------------------------------------
	   LAYOUT
	   --------------------------------------------------------------- */
	--layout-max:       1440px;  /* Ancho del marco de desktop (límite exterior del contenido) */
	--content-max:      1440px;  /* [AJUSTABLE] ancho ÚNICO de toda la ficha: hero, cuerpo, menú y footer */
	--plans-width:      900px;   /* [AJUSTABLE] ancho del carrusel de planos (flechas) */
	--content-column:   1080px;  /* (en desuso; se mantiene por compatibilidad) */
	--content-wide:     1280px;  /* [PROVISIONAL] ancho para bloques marcados como "ancho amplio" */
	--content-measure:  768px;   /* [PROVISIONAL] ancho de la columna de texto legible; fácil de ajustar */
	--gutter:           24px;    /* Margen lateral mínimo en pantallas pequeñas */

	/* Breakpoints (referencia; en CSS se usan en las media queries):
	   480px  → móviles en vertical
	   768px  → tablets y móviles apaisados
	   1024px → tablets horizontales y portátiles */
}