/*
 * Design tokens — Congreso Internacional de Turismo de Salud y Bienestar
 *
 * Palette derived from the 8vo edition flyer ("Más que salud. Más que
 * turismo. Una plataforma país."). The flyer's sector wheel runs a
 * continuous ramp from teal on the left to deep navy on the right, over a
 * mid blue — that ramp is the brand's core visual device and is reproduced
 * here as three families:
 *
 *   blue  #087CBF  bottom band, INNOVACIÓN / INVERSIÓN — primary
 *   cyan  #29A9E0  the lighter half of the logo's circles
 *   teal  #079798  NETWORKING, and the left arc of the wheel
 *   navy  #1C5487  the right arc of the wheel, and dark sections
 *   ink   #58595B  "Más que salud. Más que turismo." body grey
 *
 * These values are SAMPLED from reference/flyer-8vo-congreso.jpg via canvas,
 * not estimated: the 500-level of each family is a measured pixel value, and
 * the lighter/darker steps are built around it.
 *
 * Everything else in the theme reads from these variables. Change a value
 * here and it propagates site-wide — no find-and-replace.
 */

:root {
	/* ---- Brand blue (primary) --------------------------------------
	   #087CBF measured off the flyer's bottom band and the INNOVACIÓN /
	   INVERSIÓN pillars — also the single most common colour in the artwork. */
	--c-brand-900: #063854;
	--c-brand-800: #054368;
	--c-brand-700: #05537f;
	--c-brand-600: #06679f;
	--c-brand-500: #087cbf; /* primary — measured */
	--c-brand-400: #2f98d2;
	--c-brand-300: #6cb9e4;
	--c-brand-200: #a8d6f0;
	--c-brand-100: #d6ecf8;
	--c-brand-50:  #eef7fc;

	/* ---- Cyan (the lighter half of the logo's circles) -------------- */
	--c-cyan-600: #1690cc;
	--c-cyan-500: #29a9e0;
	--c-cyan-400: #55bfe9;
	--c-cyan-100: #ddf1fb;

	/* ---- Teal (NETWORKING, left arc of the wheel) -------------------
	   #079798 measured from the wheel's left segments. */
	--c-teal-700: #056566;
	--c-teal-600: #067c7d;
	--c-teal-500: #079798; /* measured */
	--c-teal-400: #2ab0b0;
	--c-teal-100: #e0f4f4;

	/* ---- Navy (right arc of the wheel, dark sections) ---------------
	   #1C5487 measured from the wheel's right segments. */
	--c-navy-900: #102d4a;
	--c-navy-800: #163f66;
	--c-navy-700: #1c5487; /* measured */

	/* The wheel's teal → navy ramp, reusable as one value */
	--gradient-sectors: linear-gradient(
		135deg,
		var(--c-teal-500) 0%,
		var(--c-brand-500) 52%,
		var(--c-navy-700) 100%
	);

	/* ---- Neutrals -------------------------------------------------- */
	--c-ink-900: #0f1720; /* headings */
	--c-ink-800: #1d2732;
	--c-ink-700: #39424e;
	--c-ink-600: #585860; /* brand neutral, body copy */
	--c-ink-400: #8a919b;
	--c-ink-300: #c2c8d0;
	--c-ink-200: #e3e7ec;
	--c-ink-100: #f1f4f7;
	--c-ink-50:  #f8fafc;
	--c-white:   #ffffff;

	/* ---- Semantic -------------------------------------------------- */
	--c-bg:            var(--c-white);
	/* Tintados de marca, no grises neutros: alternar blanco con un gris a
	   un punto del blanco no se leía como cambio de sección. */
	--c-bg-subtle:     var(--c-brand-50);
	--c-bg-muted:      var(--c-brand-100);
	--c-bg-teal:       var(--c-teal-100);
	--c-bg-inverse:    var(--c-navy-900);
	--c-bg-brand:      var(--c-brand-500);

	--c-text:          var(--c-ink-600);
	--c-text-strong:   var(--c-ink-900);
	--c-text-muted:    var(--c-ink-400);
	--c-text-inverse:  var(--c-white);
	--c-text-on-brand: var(--c-white);

	--c-border:        var(--c-ink-200);
	--c-border-strong: var(--c-ink-300);

	--c-link:          var(--c-brand-600);
	--c-link-hover:    var(--c-brand-700);
	--c-focus:         var(--c-brand-400);

	/* ---- Typography ------------------------------------------------
	 * Manrope, self-hosted (see fonts.css). The system stack behind it is
	 * the fallback shown during font-display: swap, chosen because its
	 * metrics are close enough that the swap barely shifts the layout.
	 */
	--font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-display: var(--font-sans);

	/* Fluid type scale — 1.250 (major third) on mobile, 1.333 on desktop.
	 * clamp() means no breakpoint jumps: type scales with the viewport. */
	--fs-xs:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--fs-sm:   clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	--fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-md:   clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
	--fs-lg:   clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
	--fs-xl:   clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
	--fs-2xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
	--fs-3xl:  clamp(2.75rem, 1.85rem + 4.2vw, 5rem);

	--lh-tight:   1.08;
	--lh-snug:    1.25;
	--lh-normal:  1.6;
	--lh-relaxed: 1.75;

	--tracking-tight: -0.02em;
	--tracking-snug:  -0.01em;
	--tracking-wide:  0.08em;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi:   600;
	--fw-bold:   700;
	--fw-black:  800;

	/* ---- Space — 4px base, geometric ------------------------------- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.5rem;
	--sp-6:  2rem;
	--sp-7:  2.5rem;
	--sp-8:  3rem;
	--sp-9:  4rem;
	--sp-10: 5rem;
	--sp-11: 6rem;
	--sp-12: 8rem;

	/* Section rhythm scales with viewport so mobile isn't cavernous */
	/* Se recortó un 27 % en escritorio (era 3.5-7.5rem): con el aire
	   anterior una sección terminaba pareciendo el final de la página. */
	--section-y: clamp(2.75rem, 1.75rem + 4.5vw, 5.5rem);

	/* ---- Layout ---------------------------------------------------- */
	--container:      1200px;
	--container-wide: 1440px;
	--container-text: 68ch;
	--gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

	/* ---- Radius ---------------------------------------------------- */
	--r-sm:   6px;
	--r-md:   10px;
	--r-lg:   16px;
	--r-xl:   24px;
	--r-full: 999px;

	/* ---- Elevation — tinted with the brand hue, never neutral black - */
	--shadow-sm: 0 1px 2px rgba(16, 45, 74, 0.06),
	             0 1px 3px rgba(16, 45, 74, 0.08);
	--shadow-md: 0 4px 12px rgba(16, 45, 74, 0.08),
	             0 2px 4px rgba(16, 45, 74, 0.05);
	--shadow-lg: 0 12px 32px rgba(16, 45, 74, 0.12),
	             0 4px 8px rgba(16, 45, 74, 0.06);
	--shadow-xl: 0 24px 64px rgba(16, 45, 74, 0.18),
	             0 8px 16px rgba(16, 45, 74, 0.08);

	/* ---- Motion ---------------------------------------------------- */
	--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 500ms;

	--header-h: 84px;
	--header-h-sticky: 66px;
	--z-header: 100;
	--z-menu: 200;
	--z-modal: 300;
}

/* Respect the OS setting. Every animation in the theme is decorative,
   so switching them off must never hide content. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 1ms;
		--dur-base: 1ms;
		--dur-slow: 1ms;
	}
}