/* ──────────────────────────────────────────────────────────────────────────
   MTP Manufaktur — Base (surface-aware)
   Umsetzung von design.md §10 (Instrumentenlicht) + §6 (A11y).

   Element-Defaults referenzieren die SEMANTISCHE Token-Schicht (--mtp-fg,
   --mtp-bg, --mtp-accent …). Dadurch kippen Texte/Headings/Links automatisch,
   sobald sie in einer .mtp-dark-Sektion sitzen — kein Dark-spezifischer Code.
   Selektoren mit body-Prefix für höhere Spezifität als Astra-Defaults.
   ────────────────────────────────────────────────────────────────────────── */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body,
body.ast-separate-container,
body.ast-page-builder-template {
	font-family: var(--mtp-font-ui);
	font-size: var(--mtp-text-base);
	line-height: 1.6;
	color: var(--mtp-fg);
	background-color: var(--mtp-bg);
}

/* Body-Text: semantische Vordergrundfarbe (Light: ink #34332e ≈12:1). */
body p,
body li,
.entry-content p,
.entry-content li {
	color: var(--mtp-fg);
}

/* H1+H2: Instrument Serif (Display, Gewicht 400, tight tracking) — Heritage-Stimme.
   H3–H6: Inter Tight. Beide nehmen die surface-abhängige „strong"-Farbe. */
body h1,
body h2,
.entry-content h1,
.entry-content h2,
.site-title {
	font-family: var(--mtp-font-display);
	font-weight: 400;
	letter-spacing: var(--mtp-tracking-tight);
	color: var(--mtp-fg-strong);
	line-height: 1.05;
}

body h3,
body h4,
body h5,
body h6,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--mtp-font-ui);
	font-weight: 600;
	letter-spacing: var(--mtp-tracking-normal);
	color: var(--mtp-fg-strong);
	line-height: 1.3;
}

body h1 { font-size: var(--mtp-text-5xl); }
body h2 { font-size: var(--mtp-text-4xl); }
body h3 { font-size: var(--mtp-text-2xl); }
body h4 { font-size: var(--mtp-text-xl); }
body h5 { font-size: var(--mtp-text-lg); }
body h6 { font-size: var(--mtp-text-base); }

/* Astras .entry-title hat höhere Spezifität als unsere Element-Selektoren —
   doppelt-qualifizierter Selektor zieht gleich. */
body .entry-title,
body .ast-page-builder-template .entry-title {
	font-size: var(--mtp-text-4xl);
	font-family: var(--mtp-font-display);
	font-weight: 400;
	letter-spacing: var(--mtp-tracking-tight);
	line-height: 1.05;
	color: var(--mtp-fg-strong);
}

@media (min-width: 768px) {
	body h1 { font-size: var(--mtp-text-6xl); }
	body h2 { font-size: var(--mtp-text-5xl); }
	body .entry-title { font-size: var(--mtp-text-5xl); }
}

/* Links: semantischer Brass-Akzent (Light: brass-deep #8a7508 = AA; Dark: brass-light). */
body a {
	color: var(--mtp-accent);
	text-underline-offset: 0.2em;
	transition: color var(--mtp-duration-fast) var(--mtp-ease-standard);
}

body a:hover,
body a:focus {
	color: var(--mtp-accent-hover);
}

/* Code/Tech-Strings: JetBrains Mono. */
body code,
body kbd,
body pre,
body samp {
	font-family: var(--mtp-font-mono);
	font-size: 0.95em;
}

/* Focus-Ring: 2px brass + 2px offset, immer sichtbar (A11y-Pflicht).
   Auf Dark kippt der Ring auf brass-light (sichtbar gegen dunklen Grund). */
:focus-visible {
	outline: 2px solid var(--mtp-focus-ring);
	outline-offset: 2px;
	border-radius: var(--mtp-radius-sm);
}

/* Reduced-Motion respektieren. */
@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;
	}
}

/* Selection-Color: brass-Tönung. */
::selection {
	background: var(--mtp-brass-200);
	color: var(--mtp-ink-900);
}

/* Container-Breiten als Utility (für Spectra-Blocks später). */
.mtp-container {
	width: 100%;
	max-width: var(--mtp-container-content);
	margin-inline: auto;
	padding-inline: var(--mtp-space-4);
}
@media (min-width: 768px) {
	.mtp-container {
		padding-inline: var(--mtp-space-8);
	}
}

.mtp-prose {
	max-width: var(--mtp-container-prose);
}