/* ============================================================
   Horizon brand-kit TEST adapter (2026-06-12)
   Maps every legacy token name on the site to the Horizon tokens
   (brand-kit-tokens.css, loaded just before this file) and applies
   the kit's type system. Loaded last so its :root wins over the
   child theme, homepage-temp, and the theme Customizer inline CSS.
   REVERT: remove the brand-kit-test.php require in tourszoom-custom.
   Checkpoint: themes-git 95b1fa5 / plugins-git 3a28124.
   ============================================================ */

:root {
	/* ---- Child-theme legacy names → Horizon ---- */
	--tz-blue:        var(--tz-coral);      /* primary action color */
	--tz-blue-dark:   var(--tz-coral-600);  /* action hover */
	--tz-blue-light:  var(--tz-coral-100);  /* action tint background */
	--tz-dark:        var(--tz-navy);
	--tz-gray:        var(--tz-slate-500);
	--tz-gray-light:  var(--tz-cloud);
	--tz-amber:       var(--tz-coral);
	--tz-orange:      var(--tz-coral-600);
	--tz-red:         var(--tz-danger);

	/* ---- homepage-temp legacy names → Horizon ---- */
	--tz-amber-hover:  var(--tz-coral-600);
	--tz-amber-tint:   var(--tz-coral-100);
	--tz-amber-shadow: 0 4px 16px rgba(224, 79, 45, 0.20);
	--tz-cream:        var(--tz-sand);
	--tz-cream-border: var(--tz-border);
	--tz-gray-bg:      var(--tz-cloud);
	--tz-text:         var(--tz-slate);
	--tz-text-light:   var(--tz-slate-500);

	/* ---- homepage-v2 internal names → Horizon ---- */
	--amber:       var(--tz-coral);
	--amber-hover: var(--tz-coral-600);
	--amber-tint:  var(--tz-coral-100);
	--navy:        var(--tz-navy);
	--navy-2:      var(--tz-navy-700);
	--dark:        #0d2840; /* darker stop for hero gradients (derived from navy) */
	--cream:       var(--tz-sand);

	/* ---- Theme Customizer / Tourfic vars → Horizon ---- */
	--tf-headings-font-family: var(--tz-font-heading);
	--tf-body-font-family:     var(--tz-font-body);
	--tf-body-font-size:       var(--tz-text-body);
	--tf-body-line-height:     var(--tz-leading-body);
	--tf-primary:              var(--tz-coral);
	--tf-brand-dark:           var(--tz-navy);
	--tf-brand-lite:           var(--tz-coral-100);
	--tf-links-color:          var(--tz-coral-700);
	--tf-border-default:       var(--tz-border);
}

/* homepage-v2 defines its vars scoped on .tzhp (closer scope beats
   :root) — remap them at the same scope. */
.tzhp {
	--amber:       var(--tz-coral);
	--amber-hover: var(--tz-coral-600);
	--amber-tint:  var(--tz-coral-100);
	--navy:        var(--tz-navy);
	--navy-2:      var(--tz-navy-700);
	--dark:        #0d2840;
	--cream:       var(--tz-sand);
	--gray-bg:     var(--tz-cloud);
	--border:      var(--tz-border);
	--text:        var(--tz-slate);
	--text-light:  var(--tz-slate-500);
}

/* ---- Kit type system (desktop scale, fluid below 1024px) ---- */
body {
	font-family: var(--tz-font-body);
	font-size: var(--tz-text-body);
	line-height: var(--tz-leading-body);
	color: var(--tz-slate);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--tz-font-heading);
}
h1 { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2;  font-weight: 600; }
h3 { font-size: clamp(21px, 2.6vw, 24px); line-height: 1.3;  font-weight: 600; }
h4 { font-size: 19px; line-height: 1.4; font-weight: 600; }
small, .tz-small { font-size: var(--tz-text-small); }

/* Headings keep their contextual colors (white on navy heroes); only
   light-background content areas pick up the kit navy. */
.tz-post h2, .tz-post h3, .tz-post h4,
.entry-content h2, .entry-content h3, .entry-content h4 {
	color: var(--tz-navy);
}

/* The theme Customizer emits double-ID per-element typography
   (#tft-site-main-body #page h1 { Playfair 48px capitalize } etc.) that
   outranks any plain selector. Re-declared here at the same specificity —
   this sheet loads later, so the kit system wins. */
#tft-site-main-body #page :is(h1, h1 > *),
#tft-site-main-body #page :is(h2, h2 > *),
#tft-site-main-body #page :is(h3, h3 > *),
#tft-site-main-body #page :is(h4, h4 > *),
#tft-site-main-body #page :is(h5, h5 > *),
#tft-site-main-body #page :is(h6, h6 > *) {
	font-family: var(--tz-font-heading);
	letter-spacing: normal;
	text-transform: none;
}
#tft-site-main-body #page :is(h1, h1 > *) { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.15; font-weight: 700; }
#tft-site-main-body #page :is(h2, h2 > *) { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2;  font-weight: 600; }
#tft-site-main-body #page :is(h3, h3 > *) { font-size: clamp(21px, 2.6vw, 24px); line-height: 1.3;  font-weight: 600; }
#tft-site-main-body #page :is(h4, h4 > *) { font-size: 19px; line-height: 1.4; font-weight: 600; }
#tft-site-main-body #page :is(h5, h5 > *) { font-size: 17px; line-height: 1.4; font-weight: 600; }
#tft-site-main-body #page :is(h6, h6 > *) { font-size: 15px; line-height: 1.4; font-weight: 600; }

/* Customizer button set (DM Sans 20px, white-on-white) → kit primary. */
#tft-site-main-body .site :is(.tf_btn, .tft-btn, .comment-form .submit, .wpcf7-form .wpcf7-submit, .tft-popular-hotels-design__two .tft-desination-btn .tft-btn, .tft-latest-posts-design__three .tft-read-more a, .wp-element-button, .tft-account a) {
	font-family: var(--tz-font-body);
	font-weight: 500;
	font-size: 16px;
	background-color: var(--tz-coral);
	color: var(--tz-white);
	border-color: var(--tz-coral);
}
#tft-site-main-body .site :is(.tf_btn, .tft-btn, .wp-element-button):hover {
	background-color: var(--tz-coral-600);
	border-color: var(--tz-coral-600);
	color: var(--tz-white);
}