/**
 * CHESAALULA — Visual Language V2 tokens.
 *
 * This is the canonical configuration layer for the post-navigation-freeze
 * visual system. It contains decisions, not component selectors. New Heroes,
 * cards and editorial surfaces must consume these variables instead of
 * repeating literal values in page stylesheets.
 *
 * Compatibility rule: the legacy --ch-* contract in discovery.css remains
 * untouched until each component is migrated and visually approved.
 */

.ch-visual-language,
.ch-discovery,
.ch-discovery-shell,
body.ch-home-v2,
body.vk-destination-detail-page {
	/* Identity. */
	--ch-vl-color-midnight: #0f172a;
	--ch-vl-color-cream: #fffcf7;
	--ch-vl-color-sand: #fff3e6;
	--ch-vl-color-teal: #006d77;
	--ch-vl-color-green: #2a9d8f;
	--ch-vl-color-coral: #ff6f61;
	--ch-vl-color-copy-muted: #526071;
	--ch-vl-color-line: rgba(15, 23, 42, 0.14);
	--ch-vl-color-on-photo: #ffffff;
	--ch-vl-color-mystic-light: #f6c76b;

	/* Typography roles. Fonts are self-hosted by discovery.css. */
	--ch-vl-font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
	--ch-vl-font-interface: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Index Hero: defined and restrained; photography remains protagonist. */
	--ch-vl-hero-title-font: var(--ch-vl-font-interface);
	--ch-vl-hero-title-size: clamp(56px, 4.5vw, 64px);
	--ch-vl-hero-title-weight: 480;
	--ch-vl-hero-title-line-height: 1.04;
	--ch-vl-hero-title-tracking: -0.03em;
	--ch-vl-hero-copy-max: 720px;
	--ch-vl-hero-lede-max: 620px;
	--ch-vl-hero-lede-size: clamp(18px, 1.25vw, 20px);
	--ch-vl-hero-lede-line-height: 1.5;
	--ch-vl-hero-content-padding-top: 40px;
	--ch-vl-hero-content-padding-bottom: 112px;
	--ch-vl-hero-overlay-destination: linear-gradient(90deg, rgba(15, 23, 42, 0.76) 0%, rgba(20, 27, 36, 0.44) 40%, rgba(15, 23, 42, 0.08) 72%), linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.04) 52%, rgba(24, 20, 18, 0.30) 100%);
	--ch-vl-hero-overlay-experience: linear-gradient(90deg, rgba(15, 23, 42, 0.76) 0%, rgba(20, 27, 36, 0.44) 40%, rgba(15, 23, 42, 0.08) 72%), linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.04) 52%, rgba(24, 20, 18, 0.30) 100%);
	--ch-vl-hero-overlay-event: linear-gradient(90deg, rgba(15, 23, 42, 0.76) 0%, rgba(20, 27, 36, 0.44) 40%, rgba(15, 23, 42, 0.08) 72%), linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.04) 52%, rgba(24, 20, 18, 0.30) 100%);

	/* Entity Card shared shell. Anatomy remains entity-specific. */
	--ch-vl-card-title-font: var(--ch-vl-font-editorial);
	--ch-vl-card-title-size: clamp(19px, 1.15vw, 22px);
	--ch-vl-card-title-weight: 480;
	--ch-vl-card-title-line-height: 1.02;
	--ch-vl-card-title-tracking: -0.035em;
	--ch-vl-card-context-size: 11px;
	--ch-vl-card-copy-size: 14px;
	--ch-vl-card-copy-line-height: 1.55;
	--ch-vl-card-radius: 22px;
	--ch-vl-card-shadow: 0 16px 50px rgba(15, 23, 42, 0.12);
	--ch-vl-destination-card-aspect: 1 / 1;
	--ch-vl-destination-card-padding: clamp(20px, 2vw, 26px);
	--ch-vl-destination-card-context-color: #ffb347;
	--ch-vl-destination-card-title-size: clamp(25px, 2.2vw, 32px);
	--ch-vl-result-title-font: var(--ch-vl-font-editorial);
	--ch-vl-result-title-size: clamp(36px, 3vw, 44px);
	--ch-vl-result-title-weight: 460;
	--ch-vl-result-title-line-height: 1.04;
	--ch-vl-result-title-tracking: -0.03em;

	/* Entity overlays: one CHESAALULA graphite, contained behind copy only. */
	--ch-vl-overlay-destination: linear-gradient(180deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.08) 45%, rgba(15, 23, 42, 0.58) 64%, rgba(15, 23, 42, 0.94) 84%, rgba(15, 23, 42, 0.98) 100%);
	--ch-vl-overlay-experience: linear-gradient(180deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.08) 45%, rgba(15, 23, 42, 0.58) 64%, rgba(15, 23, 42, 0.94) 84%, rgba(15, 23, 42, 0.98) 100%);
	--ch-vl-overlay-event: linear-gradient(180deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.08) 45%, rgba(15, 23, 42, 0.58) 64%, rgba(15, 23, 42, 0.94) 84%, rgba(15, 23, 42, 0.98) 100%);

	/* CTA: clear, not transactional or visually aggressive. */
	--ch-vl-cta-font: var(--ch-vl-font-interface);
	--ch-vl-cta-size: 14px;
	--ch-vl-cta-weight: 600;
	--ch-vl-cta-tracking: 0;
	--ch-vl-hero-cta-reference: 'Explorar experiencias';
	--ch-vl-hero-cta-background: #e25a24;
	--ch-vl-hero-cta-background-hover: #c94a18;
	--ch-vl-hero-cta-color: #ffffff;

	/* Shared rhythm and motion. */
	--ch-vl-content-max: 1380px;
	--ch-vl-gutter: clamp(22px, 5vw, 76px);
	--ch-vl-motion-fast: 200ms;
	--ch-vl-motion-image: 700ms;
	--ch-vl-motion-ease: cubic-bezier(0.2, 0.65, 0.25, 1);
	--ch-vl-hero-motion-duration: 18s;
	--ch-vl-hero-motion-scale-start: 1.03;
	--ch-vl-hero-motion-scale-end: 1.09;
	--ch-vl-hero-motion-shift-x: -1.4%;
	--ch-vl-hero-motion-shift-y: -0.8%;
}

@keyframes ch-vl-hero-drift {
	0% {
		transform: scale(var(--ch-vl-hero-motion-scale-start, 1.03)) translate3d(0, 0, 0);
	}
	100% {
		transform: scale(var(--ch-vl-hero-motion-scale-end, 1.09)) translate3d(
			var(--ch-vl-hero-motion-shift-x, -1.4%),
			var(--ch-vl-hero-motion-shift-y, -0.8%),
			0
		);
	}
}

@media (max-width: 1023px) {
	.ch-visual-language,
	.ch-discovery,
	.ch-discovery-shell,
	body.ch-home-v2,
	body.vk-destination-detail-page {
		--ch-vl-hero-title-size: clamp(48px, 6vw, 56px);
		--ch-vl-hero-content-padding-top: 36px;
		--ch-vl-hero-content-padding-bottom: 76px;
		--ch-vl-card-title-size: clamp(19px, 2.2vw, 22px);
		--ch-vl-result-title-size: clamp(34px, 4.5vw, 40px);
		--ch-vl-card-radius: 22px;
	}
}

@media (max-width: 767px) {
	.ch-visual-language,
	.ch-discovery,
	.ch-discovery-shell,
	body.ch-home-v2,
	body.vk-destination-detail-page {
		--ch-vl-hero-title-size: clamp(36px, 10vw, 42px);
		--ch-vl-hero-lede-size: 17px;
		--ch-vl-hero-content-padding-top: 28px;
		--ch-vl-hero-content-padding-bottom: 48px;
		--ch-vl-card-title-size: clamp(20px, 5.2vw, 23px);
		--ch-vl-result-title-size: clamp(32px, 9vw, 38px);
		--ch-vl-card-radius: 22px;
		--ch-vl-gutter: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ch-visual-language,
	.ch-discovery,
	.ch-discovery-shell,
	body.ch-home-v2,
	body.vk-destination-detail-page {
		--ch-vl-motion-fast: 0ms;
		--ch-vl-motion-image: 0ms;
		--ch-vl-hero-motion-duration: 0s;
		--ch-vl-hero-motion-scale-start: 1;
		--ch-vl-hero-motion-scale-end: 1;
		--ch-vl-hero-motion-shift-x: 0%;
		--ch-vl-hero-motion-shift-y: 0%;
	}
}