/* ============================================================
   Base — sitewide type system, legacy-token bridge, buttons.
   Migration step 3 (2026-07-02): this file DISSOLVES the brand-kit
   overlay (tourszoom-custom brand-kit-apply.css, prio 999) into the
   design system proper. Same effects, one difference: the overlay
   relied on loading LAST; this file loads at prio 19, so every rule
   that fought the Customizer's late inline CSS now wins by
   SPECIFICITY (html prefix) instead of source order.
   The legacy-name remaps (§1) retire at step 9 when their consumers
   (child theme, homepage-temp/v2) are gone — until then they keep
   every old stylesheet resolving to the brand.
   ============================================================ */

/* ---- 1. Legacy token names → canonical tokens ---------------- */
:root {
	/* child-theme legacy names */
	--tz-blue:        var(--tz-coral);
	--tz-blue-dark:   var(--tz-coral-600);
	--tz-blue-light:  var(--tz-coral-100);
	--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 */
	--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-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 */
	--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 hero-gradient stop (derived from navy) */
	--cream:       var(--tz-sand);

	/* theme Customizer / Tourfic vars */
	--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);
}

/* Customizer emits its own `:root { --tf-body-font-family: "Plus
   Jakarta Sans" }` as late wp_head inline CSS — a bare :root remap
   loses on source order. html:root (0,1,1) wins regardless of order. */
html:root {
	--tf-body-font-family:     var(--tz-font-body);
	--tf-headings-font-family: var(--tz-font-heading);
}

/* homepage-v2 scopes its vars on .tzhp (closer scope beats :root) —
   remap 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);
}

/* ---- 2. Type system ------------------------------------------ */
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 contextual colors (white on navy heroes); light
   content areas pick up navy. */
.tz-post h2, .tz-post h3, .tz-post h4,
.entry-content h2, .entry-content h3, .entry-content h4 {
	color: var(--tz-navy);
}

/* The Customizer emits double-ID per-element typography
   (#tft-site-main-body #page h1 { 48px capitalize … }) late in
   wp_head. html prefix = one specificity notch above it, so these
   win regardless of load order (the dissolved overlay needed order). */
html #tft-site-main-body #page :is(h1, h1 > *),
html #tft-site-main-body #page :is(h2, h2 > *),
html #tft-site-main-body #page :is(h3, h3 > *),
html #tft-site-main-body #page :is(h4, h4 > *),
html #tft-site-main-body #page :is(h5, h5 > *),
html #tft-site-main-body #page :is(h6, h6 > *) {
	font-family: var(--tz-font-heading);
	letter-spacing: normal;
	text-transform: none;
}
html #tft-site-main-body #page :is(h1, h1 > *) { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.15; font-weight: 700; }
html #tft-site-main-body #page :is(h2, h2 > *) { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2;  font-weight: 600; }
html #tft-site-main-body #page :is(h3, h3 > *) { font-size: clamp(21px, 2.6vw, 24px); line-height: 1.3;  font-weight: 600; }
html #tft-site-main-body #page :is(h4, h4 > *) { font-size: 19px; line-height: 1.4; font-weight: 600; }
html #tft-site-main-body #page :is(h5, h5 > *) { font-size: 17px; line-height: 1.4; font-weight: 600; }
html #tft-site-main-body #page :is(h6, h6 > *) { font-size: 15px; line-height: 1.4; font-weight: 600; }

/* ---- 3. Buttons (theme/Tourfic/CF7/comment/login sets) -------- */
html #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-600); /* AA for white large/UI text; raw coral 2.8:1 fails */
	color: var(--tz-white);
	border-color: var(--tz-coral-600);
}
html #tft-site-main-body .site :is(.tf_btn, .tft-btn, .wp-element-button):hover {
	background-color: var(--tz-coral-700);
	border-color: var(--tz-coral-700);
	color: var(--tz-white);
}

/* ---- 4. Focus visibility (new, sitewide) ---------------------- */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--tz-focus);
	outline-offset: 2px;
}