/* ==========================================================================
   Thornby token layer + utilities
   Mirrors docs/01-brand-tokens.md — that file is the source of truth.
   Rule: Pro handles layout and most styling via Global Colors / Text Styles.
   This layer exists only for (a) tokens as custom properties, (b) the few
   treatments Pro can't express natively. Do not grow it casually.
   ========================================================================== */

:root {
	/* Colour — 🔶 sampled from mockup, confirm per tokens doc */
	--tb-green:    #18312B;
	--tb-bone:     #F0F1EC;
	--tb-tan:      #91522F;
	--tb-charcoal: #262622;
	--tb-white:    #FFFFFF;
	--tb-rule:     rgba(38, 38, 34, 0.15);

	/* Type — 'the-seasons' covers Adobe Fonts route, 'The Seasons' self-hosted route */
	--tb-font-serif: 'the-seasons', 'The Seasons', Georgia, 'Times New Roman', serif;
	--tb-font-sans: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;

	/* Spacing — 8px base */
	--tb-space-section: 120px;
	--tb-space-block:   48px;
	--tb-space-card-gap: 32px;
	--tb-content-max:  1280px;
	--tb-gutter:       48px;
}

@media (max-width: 767px) {
	:root {
		--tb-space-section: 64px;
		--tb-space-block:   32px;
		--tb-space-card-gap: 16px;
		--tb-gutter:        24px;
	}
}

/* --------------------------------------------------------------------------
   Utilities Pro can't do cleanly
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Text styles — THE canonical type system (docs/01-brand-tokens.md).
   Usage in Pro: apply the class (Customize tab → Class), leave the element's
   Format controls on Inherit. Sizes are fluid: clamp() scales between the
   mobile and desktop token values, so no per-element responsive settings.
   -------------------------------------------------------------------------- */

.tb-display,
.tb-display .x-text-content-text-primary,
.tb-display .x-anchor-text-primary,
.tb-display .x-text-content-text-subheadline {
	font-family: var(--tb-font-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(34px, 28.4px + 1.44vw, 56px) !important;
	line-height: 1.15 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--tb-charcoal) !important;
}

.tb-h2,
.tb-h2 .x-text-content-text-primary,
.tb-h2 .x-anchor-text-primary,
.tb-h2 .x-text-content-text-subheadline {
	font-family: var(--tb-font-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 24.9px + 0.78vw, 40px) !important;
	line-height: 1.2 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	color: var(--tb-charcoal) !important;
}

.tb-h3,
.tb-h3 .x-text-content-text-primary,
.tb-h3 .x-anchor-text-primary,
.tb-h3 .x-text-content-text-subheadline {
	font-family: var(--tb-font-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(22px, 21px + 0.26vw, 26px) !important;
	line-height: 1.3 !important;
	color: var(--tb-charcoal) !important;
}

.tb-body,
.tb-body .x-text-content-text-primary,
.tb-body .x-anchor-text-primary,
.tb-body .x-text-content-text-subheadline {
	font-family: var(--tb-font-sans) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--tb-charcoal) !important;
}

.tb-small,
.tb-small .x-text-content-text-primary,
.tb-small .x-anchor-text-primary,
.tb-small .x-text-content-text-subheadline {
	font-family: var(--tb-font-sans) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: var(--tb-charcoal) !important;
}

/* Links inside token-classed elements inherit the class colour (kills Pro's red) */
.tb-wordmark a, .tb-eyebrow a, .tb-display a, .tb-h2 a, .tb-h3 a, .tb-small a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Brand wordmark — text-based until the SVG arrives; colour follows context */
.tb-wordmark,
.tb-wordmark .x-text-content-text-primary {
	font-family: var(--tb-font-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(18px, 16px + 0.4vw, 24px) !important;
	line-height: 1 !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--tb-charcoal) !important;
}

/* Eyebrow labels: INTERIORS / SHOP / NEWS */
.tb-eyebrow,
.tb-eyebrow .x-text-content-text-primary,
.tb-eyebrow .x-anchor-text-primary,
.tb-eyebrow .x-text-content-text-subheadline {
	font-family: var(--tb-font-sans) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--tb-charcoal) !important;
}


/* Hairline section rule */
.tb-rule {
	border: 0;
	border-top: 1px solid var(--tb-rule);
	margin: 0;
}

/* Standard section rhythm — apply to Pro Sections via class, not inline padding */
.tb-section {
	padding-top: var(--tb-space-section);
	padding-bottom: var(--tb-space-section);
}

/* Reversed-text context (on green or imagery) */
.tb-on-dark,
.tb-on-dark a {
	color: var(--tb-white);
}
.tb-on-dark .tb-rule {
	border-top-color: rgba(255, 255, 255, 0.2);
}

/* Respect reduced motion globally — QA gate */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* On dark backgrounds (.tb-on-dark on the section) text styles switch to white */
.tb-on-dark [class*="tb-"],
.tb-on-dark [class*="tb-"] .x-text-content-text-primary,
.tb-on-dark [class*="tb-"] .x-text-content-text-subheadline {
	color: var(--tb-white) !important;
}

/* --------------------------------------------------------------------------
   Layout utilities for modules
   -------------------------------------------------------------------------- */

/* Media that fills its half at 4:3, cropping to fit */
.tb-cover,
.tb-cover img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
}

/* Split 50/50 reverse: DOM stays image-first (so mobile always stacks image on
   top); this class flips the visual order on desktop only. */
@media (min-width: 768px) {
	.tb-split-flip .x-row-inner {
		flex-direction: row-reverse !important;
	}
}

/* Copy block inside a split: measure cap + breathing room */
.tb-split-copy {
	max-width: 440px !important;
	padding-left: var(--tb-gutter) !important;
	padding-right: var(--tb-gutter) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Mobile: split copy needs its own vertical breathing room (no tall column to centre in) */
@media (max-width: 767px) {
	.tb-split-copy {
		padding-top: 48px !important;
		padding-bottom: 64px !important;
	}
}

/* Token spacing between heading and body */
.tb-mt-block {
	margin-top: var(--tb-space-block) !important;
}