/* Shared KatanaSteel visual tokens. Components may override every variable locally. */
.ks-brand {
	--ks-brand-bg: #f4f0e8;
	--ks-brand-surface: #fcfaf6;
	--ks-brand-ink: #181512;
	--ks-brand-muted: #6f675e;
	--ks-brand-accent: #96652e;
	--ks-brand-accent-contrast: #fffaf2;
	--ks-brand-line: rgba(24, 21, 18, .16);
	--ks-brand-dark: #181512;
	--ks-brand-radius: 2px;
	--ks-brand-ease: cubic-bezier(.2, .8, .2, 1);
	--ks-brand-shadow: 0 24px 70px rgba(31, 24, 17, .12);
	background: var(--ks-brand-bg);
	color: var(--ks-brand-ink);
}

.ks-brand--steel {
	--ks-brand-bg: #f1f3f4;
	--ks-brand-surface: #fff;
	--ks-brand-ink: #151718;
	--ks-brand-muted: #62696d;
	--ks-brand-accent: #b51f2e;
	--ks-brand-accent-contrast: #fff;
	--ks-brand-line: rgba(21, 23, 24, .17);
	--ks-brand-dark: #111314;
}

.ks-brand--mono {
	--ks-brand-bg: #f5f5f3;
	--ks-brand-surface: #fff;
	--ks-brand-ink: #111;
	--ks-brand-muted: #606060;
	--ks-brand-accent: #111;
	--ks-brand-accent-contrast: #fff;
	--ks-brand-line: rgba(17, 17, 17, .18);
	--ks-brand-dark: #080808;
}

.ks-brand *,
.ks-brand *::before,
.ks-brand *::after {
	box-sizing: border-box;
}

.ks-brand a {
	color: inherit;
}

.ks-brand :where(a, button):focus-visible {
	outline: 2px solid var(--ks-brand-accent);
	outline-offset: 4px;
}

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