/*
 * TRU Salon design tokens.
 * Raw brand values live only here and in Elementor › Site Settings (Kit globals). Colour and font tokens read the
 * Kit variables first, so changing a global colour or font in Elementor re-themes every TRU component.
 * Fonts: Cormorant Garamond and Jost, SIL Open Font License 1.1 (see assets/fonts/*-OFL.txt).
 */

@font-face {
	font-family: "TRU Cormorant Garamond";
	src: url("../fonts/cormorant-garamond.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "TRU Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "TRU Jost";
	src: url("../fonts/jost.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Declared on body: Elementor prints the Kit variables on the body's kit class, not on :root. */
body {
	/* Primitive colours */
	--tru-ink: var(--e-global-color-primary, #292827);
	--tru-ink-2: #1c1b1a;
	--tru-bronze: var(--e-global-color-secondary, #5f5852);
	--tru-muted: var(--e-global-color-text, #55504b);
	--tru-champagne: var(--e-global-color-accent, #c9c3ba);
	--tru-ivory: var(--e-global-color-truivory, #f5f4f0);
	--tru-linen: var(--e-global-color-trulinen, #e8e5e0);
	--tru-sand: var(--e-global-color-trusand, #d7d2ca);
	--tru-taupe: var(--e-global-color-trutaupe, #aaa39b);
	/* Section titles before the scroll ink fill reaches them: large-text contrast ≥ 3:1 on every tone. */
	--tru-ink-muted: #7a736c;
	--tru-ivory-muted: #9a948d;
	--tru-white: var(--e-global-color-truwhite, #ffffff);

	/* Semantic colours (light surfaces) */
	--tru-bg: var(--tru-ivory);
	--tru-surface: var(--tru-white);
	--tru-text: var(--tru-ink);
	--tru-text-muted: var(--tru-muted);
	--tru-accent-text: var(--tru-bronze);
	--tru-line: var(--tru-sand);
	--tru-line-strong: var(--tru-taupe);
	--tru-focus: var(--tru-ink);
	--tru-success: #2f5d3a;
	--tru-error: #9b2c2c;

	/* Type */
	--tru-font-display: var(--e-global-typography-primary-font-family, "TRU Cormorant Garamond"), "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--tru-font-text: var(--e-global-typography-text-font-family, "TRU Jost"), "Jost", "Helvetica Neue", Arial, sans-serif;
	--tru-fs-hero: clamp(3rem, 1.55rem + 5.4vw, 6.75rem);
	--tru-fs-h1: clamp(2.75rem, 1.85rem + 3.7vw, 5.25rem);
	--tru-fs-h2: clamp(2.375rem, 1.65rem + 2.7vw, 4.5rem);
	--tru-fs-h3: clamp(1.5rem, 1.22rem + 0.95vw, 2.25rem);
	--tru-fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--tru-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--tru-fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--tru-fs-small: 0.9375rem;
	--tru-fs-label: 0.75rem;
	--tru-lh-tight: 1.02;
	--tru-lh-heading: 1.08;
	--tru-lh-body: 1.7;
	--tru-track-label: 0.22em;
	--tru-track-display: -0.012em;

	/* Space (4/8 based) */
	--tru-s1: 0.25rem;
	--tru-s2: 0.5rem;
	--tru-s3: 0.75rem;
	--tru-s4: 1rem;
	--tru-s5: 1.5rem;
	--tru-s6: 2rem;
	--tru-s7: 3rem;
	--tru-s8: 4rem;
	--tru-s9: 6rem;
	--tru-s10: 8rem;
	--tru-gutter: clamp(1.25rem, 0.55rem + 3.1vw, 4rem);
	--tru-section: clamp(3.5rem, 2rem + 6.2vw, 10rem);
	--tru-section-tight: clamp(3rem, 2.2rem + 3.2vw, 6rem);
	--tru-maxw: 1280px;
	--tru-measure: 62ch;

	/* Shape and depth */
	--tru-radius-0: 0;
	--tru-radius-1: 2px;
	--tru-radius-2: 6px;
	--tru-radius-pill: 999px;
	--tru-hairline: 1px solid var(--tru-line);
	--tru-shadow-panel: 0 34px 70px -34px rgb(37 34 32 / 0.38);
	--tru-shadow-lift: 0 18px 40px -24px rgb(37 34 32 / 0.45);

	/* Motion */
	--tru-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tru-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	/* Photo grade: calmer, slightly warm colour for a nude, natural look across all site photography. */
	--tru-photo-grade: saturate(0.92) contrast(0.99);
	--tru-dur-fast: 180ms;
	--tru-dur: 280ms;
	--tru-dur-slow: 640ms;
	--tru-dur-draw: 1400ms;
	--tru-icon-feedback-duration: 420ms;
	--tru-icon-draw-duration: 600ms;

	/* Layers */
	--tru-header-h: 84px;
	--tru-z-header: 100;
	--tru-z-floating: 90;
	--tru-z-drawer: 1000;
	--tru-z-lightbox: 1100;
}

@media (max-width: 1024px) {
	body {
		--tru-header-h: 68px;
	}
}