/*
 * LIVI foundation
 *
 * Source of truth for shared visual tokens and low-level layout/type roles.
 * Component rules belong in livi-shared.css; page-specific rules stay isolated
 * in their corresponding stylesheets.
 */

:root {
	--livi-bg: #050505;
	--livi-surface: #090909;
	--livi-text: #f0ede8;
	--livi-muted: rgba(240, 237, 232, .58);
	--livi-rule: rgba(240, 237, 232, .17);
	--livi-rule-strong: rgba(240, 237, 232, .34);
	--livi-focus: #f0ede8;

	--livi-font-display: "Playfair Display", serif;
	--livi-font-body: "Quicksand", sans-serif;

	--livi-type-hero: clamp(52px, 5vw, 82px);
	--livi-type-section: clamp(40px, 3.7vw, 60px);
	--livi-type-panel: clamp(30px, 2.65vw, 44px);
	--livi-type-card: clamp(21px, 1.75vw, 28px);
	--livi-type-body: clamp(14px, 1vw, 16px);
	--livi-type-body-small: 14px;
	--livi-type-action: 13px;
	--livi-type-utility: 10px;
	--livi-type-nav: 16px;

	--livi-leading-display: 1.08;
	--livi-leading-body: 1.62;
	--livi-leading-utility: 1.3;
	--livi-tracking-display: .01em;
	--livi-tracking-utility: .15em;

	--livi-page-pad: clamp(28px, 4.2vw, 80px);
	--livi-content-max: 1664px;
	--livi-case-selector-width: 288px;
	--livi-case-details-width: 268px;
	--livi-case-gap: 28px;
	--livi-case-media-height: 560px;
	--livi-case-inline-inset: 56px;
	--livi-read-max: 62ch;
	--livi-scene-min: 90svh;
	--livi-scene-pad-y: clamp(72px, 6.5vw, 104px);
	--livi-gap-lg: clamp(64px, 7vw, 128px);
	--livi-gap-md: clamp(36px, 4vw, 72px);
	--livi-radius-action: 2px;
	--livi-radius-field: 0;

	--livi-motion-fast: 220ms;
	--livi-motion-ui: 320ms;
	--livi-motion-panel: 460ms;
	--livi-motion-reveal: 720ms;
	--livi-ease-out: cubic-bezier(.22, 1, .36, 1);
	--livi-ease-ui: cubic-bezier(.4, 0, .2, 1);

	/* Compatibility aliases for the existing shared components. */
	--livi-display-leading: var(--livi-leading-display);
	--livi-display-tracking: var(--livi-tracking-display);
}

html,
body {
	background: var(--livi-bg);
}

@media (max-width: 1199px) {
	:root { --livi-case-inline-inset: 40px; }
}

@media (max-width: 767px) {
	:root { --livi-case-inline-inset: 20px; }
}

/* Canonical responsive contracts: desktop ≥1200px, tablet 768–1199px, mobile ≤767px. */

.livi-container,
.home-v3 .container,
.formats-container,
.formats-page .container,
.approach-v2 .container,
.retreats-v2 .container {
	width: min(var(--livi-content-max), calc(100% - var(--livi-page-pad) - var(--livi-page-pad)));
	margin-inline: auto;
}

.livi-scene {
	min-height: var(--livi-scene-min);
	padding-block: var(--livi-scene-pad-y);
}

.livi-display,
.livi-section-title,
.livi-panel-title,
.livi-card-title {
	font-family: var(--livi-font-display);
	font-weight: 400;
	letter-spacing: var(--livi-tracking-display);
	line-height: var(--livi-leading-display);
}

.livi-display { font-size: var(--livi-type-hero); }
.livi-section-title { font-size: var(--livi-type-section); }
.livi-panel-title { font-size: var(--livi-type-panel); }
.livi-card-title { font-size: var(--livi-type-card); }

.livi-body {
	color: var(--livi-muted);
	font-family: var(--livi-font-body);
	font-size: var(--livi-type-body);
	line-height: var(--livi-leading-body);
}

.livi-body--small {
	font-size: var(--livi-type-body-small);
}

.livi-kicker,
.livi-utility {
	font-family: var(--livi-font-body);
	font-size: var(--livi-type-utility);
	font-weight: 500;
	letter-spacing: var(--livi-tracking-utility);
	line-height: var(--livi-leading-utility);
	text-transform: uppercase;
}

.livi-focus-ring:focus-visible {
	outline: 1px solid var(--livi-focus);
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.livi-scene {
		min-height: 0;
		padding-block: 78px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.livi-focus-ring:focus-visible {
		outline-offset: 3px;
	}
}