/* TM Design System — tokens. Semua selector di-scope: aman dimuat global di WP. */
:root {
	--tm-ink: #152A4E;
	--tm-ink-deep: #0E1D38;
	--tm-ember: #CA2E3C;
	--tm-ember-dark: #B02834;
	--tm-paper: #EDF0F5;
	--tm-steel: #5C6E88;
	--tm-hivis: #C6972F;
	--tm-line: rgba(21, 42, 78, 0.12);
	--tm-line-light: rgba(237, 240, 245, 0.16);

	--tm-font-display: "Bricolage Grotesque", "DM Sans", sans-serif;
	--tm-font-body: "DM Sans", sans-serif;
	--tm-font-mono: "IBM Plex Mono", monospace;

	--tm-radius: 12px;
	--tm-radius-sm: 6px;
	--tm-shadow: 0 12px 32px rgba(21, 42, 78, 0.10);
	--tm-container: 1200px;
	--tm-section-pad: clamp(64px, 9vw, 120px);
}

.tm-container {
	max-width: var(--tm-container);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Base typography — hanya berlaku di bawah .tm-scope (root template homepage / fixture body). */
.tm-scope {
	font-family: var(--tm-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--tm-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.tm-scope h1,
.tm-scope h2,
.tm-scope h3 {
	font-family: var(--tm-font-display);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--tm-ink);
	margin: 0 0 0.5em;
}
.tm-scope h1 { font-size: clamp(40px, 5vw, 64px); }
.tm-scope h2 { font-size: clamp(32px, 3.6vw, 44px); }
.tm-scope h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; }
.tm-scope p { margin: 0 0 1em; }
.tm-scope a { color: inherit; }
.tm-scope img { max-width: 100%; height: auto; display: block; }
.tm-scope :focus-visible {
	outline: 2px solid var(--tm-ember);
	outline-offset: 2px;
}
.tm-muted { color: var(--tm-steel); }