/* WTTC design tokens. Single source for colours, type and spacing: the header, the Core plugin and (later) the
   Elementor atomic variables read these, so a brand change is made here once.
   Class naming across the site: BEM with the "wttc-" prefix (wttc-block__element--modifier). */
:root {
	--wttc-navy: #151B34;
	--wttc-white: #FFFFFF;
	--wttc-cream: #F3F0E7;                         /* warm background of introductions and quiet bands */
	--wttc-teal: #5AB0B7;                          /* former brand teal (kept, not deleted) */
	--wttc-accent: var(--wttc-logo-green);         /* accent on hovers (dark text over it): under test, the green of the logo dot. Back to the old one: var(--wttc-teal) */
	--wttc-peach: #F9D6B9;                         /* brand peach: closing bands (CTA) */
	--wttc-black: #000000;
	--wttc-glass: rgba(255, 255, 255, .22);        /* active / hover tab over the hero */
	--wttc-line: rgba(255, 255, 255, .9);          /* thin outline of the menu bar */
	--wttc-font-sans: "Inter", sans-serif;
	--wttc-font-serif: "Libre Bodoni", serif;
	--wttc-logo-size: 81px;                         /* logo at the top of the page */
	--wttc-logo-size-sm: 60px;                      /* logo once the page has scrolled */
	--wttc-header-full: calc(var(--wttc-logo-size) + var(--wttc-space-2) * 2);   /* height of the header at the top: the space pages leave under it, so it does not change while scrolling */
	--wttc-header-blur: 14px;                       /* blur of the header over the hero */
	--wttc-logo-plate: #000A3F;                     /* official logo navy (brand guidelines, Oct 2026): the plate of the logo, in every state. Never inverted. */
	--wttc-logo-green: #92D400;                     /* the dot of the official logo */
	--wttc-plate: #151B34;                          /* dark plate behind partner logos (the Together in Travel logo carries this colour) */
	--wttc-radius: 4px;
	--wttc-shadow-panel: 0 10px 30px 0 rgba(45, 45, 45, .2);
	--wttc-container: 1240px;
	--wttc-space-1: 5px;
	--wttc-space-2: 8px;
	--wttc-space-3: 15px;
	--wttc-space-4: 20px;
	--wttc-header-z: 100;
	--wttc-header-offset: 0px;                      /* set by header.js to the real header height */
}

/* Tablet and mobile: a slimmer header; the logo becomes the horizontal wordmark of wttc.org (its height is these sizes). */
@media (max-width: 1024px) {
	:root { --wttc-logo-size: 40px; --wttc-logo-size-sm: 34px; }
}