/* =========================================================================
   Studio Máté — base.css
   Standardized design system. These tokens are the single source of truth for
   component CSS (mirrors theme.json). Body 18px · two fonts · WCAG-AA contrast.
   ========================================================================= */

:root {
	/* Color */
	--navy: #0A1628;
	--navy-2: #15233A;
	--navy-3: #1E293B;
	--text: #F8F7F4;
	--text-secondary: rgba(248, 247, 244, 0.85);
	--text-muted: rgba(248, 247, 244, 0.70);
	--gold: #C8A96B;
	--line: rgba(248, 247, 244, 0.14);
	--line-gold: rgba(200, 169, 107, 0.30);

	/* Type */
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

	--fs-fine: 14px;
	--fs-small: 16px;
	--fs-body: 18px;
	--fs-lead: clamp(18px, 1.4vw, 21px);
	--fs-title-md: 28px;
	--fs-title-lg: clamp(28px, 3.2vw, 40px);
	--fs-title-xl: clamp(36px, 4.5vw, 64px);
	--fs-display: clamp(48px, 6vw, 88px);

	/* Spacing (4/8 scale) */
	--s-4: 4px;
	--s-8: 8px;
	--s-12: 12px;
	--s-16: 16px;
	--s-24: 24px;
	--s-32: 32px;
	--s-48: 48px;
	--s-64: 64px;
	--s-80: 80px;
	--s-120: 120px;
	--s-160: 160px;

	/* Layout */
	--content-wide: 1320px;
	--content-narrow: 920px;
	--measure: 65ch;
	--section-padding: clamp(80px, 10vw, 120px);
	--gutter: clamp(24px, 5vw, 40px);

	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.10);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.40);
	--shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.50);
	--glow: 0 0 8px rgba(200, 169, 107, 0.60);

	/* Chrome */
	--nav-height: 72px;
}

/* ----- Reset ----- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	background: var(--navy);
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--navy);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'ss01';
	overflow-x: hidden;
	min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--text); }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }

::selection { background: var(--gold); color: var(--navy); }

/* Accessible focus — visible gold ring, never removed */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--gold);
	color: var(--navy);
	padding: var(--s-12) var(--s-24);
	font-weight: 600;
}
.skip-link:focus { left: var(--s-16); top: var(--s-16); }

/* ----- Layout ----- */
.container {
	width: 100%;
	max-width: var(--content-wide);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.container.is-narrow { max-width: var(--content-narrow); }

.section { padding-block: var(--section-padding); position: relative; background: var(--navy); }
.section.alt { background: var(--navy-2); }

.measure { max-width: var(--measure); }

/* ----- Typography scale (decoupled from heading tags) ----- */
.display,
.title-xl,
.title-lg,
.title-md,
.title-sm {
	font-family: var(--font-display);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--text);
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.title-xl { font-size: var(--fs-title-xl); line-height: 1.05; }
.title-lg { font-size: var(--fs-title-lg); }
.title-md { font-size: var(--fs-title-md); }
.title-sm { font-size: 22px; line-height: 1.2; }

/* gold italic emphasis inside display/titles */
.display em, .title-xl em, .title-lg em, .title-md em, .title-sm em,
h1 em, h2 em, h3 em, h4 em { font-style: italic; color: var(--gold); font-weight: 400; }

/* Default heading tags map onto the scale (used only for real hierarchy) */
h1 { font: 300 var(--fs-display)/1.02 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
h2 { font: 300 var(--fs-title-xl)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
h3 { font: 300 var(--fs-title-lg)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
h4 { font: 300 var(--fs-title-md)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--text); }

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: var(--s-12);
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.eyebrow.is-plain::before { display: none; }
.eyebrow.subtle { color: var(--text-muted); }

.lead {
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-secondary);
	max-width: 60ch;
}
.lead strong { color: var(--text); font-weight: 500; }

.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-small { font-size: var(--fs-small); }
.text-fine { font-size: var(--fs-fine); }

/* ----- Buttons (UI labels: 14px floor, uppercase, tracked) ----- */
.btn-row { display: flex; gap: var(--s-16); align-items: center; flex-wrap: wrap; }

.btn-primary,
.btn-ghost,
.btn-text-link {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var(--s-12);
	cursor: pointer;
	border-radius: 0;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary {
	background: var(--gold);
	color: var(--navy);
	padding: var(--s-16) var(--s-32);
	border: 1px solid var(--gold);
}
.btn-primary:hover { background: transparent; color: var(--gold); }
.btn-ghost {
	background: transparent;
	color: var(--text);
	padding: var(--s-16) var(--s-32);
	border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-text-link {
	color: var(--gold);
	padding: var(--s-16) var(--s-12);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: none;
	font-size: var(--fs-small);
}
.btn-text-link:hover { gap: var(--s-16); }
.btn-primary .arrow,
.btn-text-link .arrow { transition: transform 0.3s; }
.btn-primary:hover .arrow,
.btn-text-link:hover .arrow { transform: translateX(6px); }

/* ----- Utilities ----- */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* =========================================================================
   Compat layer — maps the prototype's class names (used by injected long-form
   page content) onto the standardized tokens, so injected pages render with the
   same design system as component-built pages. Loaded everywhere.
   ========================================================================= */
.hero-title { font: 300 var(--fs-display)/1.02 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
.hero-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.section-title { font: 300 var(--fs-title-xl)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.section-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.lede { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--text-secondary); max-width: 60ch; }
.lede strong { color: var(--text); font-weight: 500; }

/* Shared CTA band (home, what-we-build, insights, pricing) */
.cta-section { padding: var(--section-padding) 0; text-align: center; background: var(--navy); }
.cta-inner { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); }
.cta-inner .eyebrow { justify-content: center; margin-bottom: var(--s-32); }
.cta-inner .title-xl,
.cta-inner .section-title,
.cta-inner h2 { margin-bottom: var(--s-32); }
.cta-inner .lead,
.cta-inner .lede { margin-left: auto; margin-right: auto; margin-bottom: var(--s-48); }
.cta-inner .btn-row { justify-content: center; }
[data-nav]:not(a) { cursor: pointer; }

/* Page entrance (replaces SPA fade-in) */
@keyframes sm-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.site-main { animation: sm-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}