/*
 * Kuvani design tokens — single source of truth for color, type, and spacing.
 * Component CSS (theme.css) should only ever reference these custom
 * properties, never a literal hex/px value, so the whole system can be
 * retuned from this one file.
 */

:root {
	/* ---- Color: light (default) ---- */
	--kv-bg: #f6f3ee;
	--kv-surface: #ffffff;
	--kv-surface-2: #ece6dc;
	--kv-ink: #14110d;
	--kv-ink-muted: #5c554a;
	--kv-line: #ddd4c4;
	--kv-accent: #4a2e1f;
	--kv-accent-ink: #f6f3ee;
	--kv-accent-soft: #e9ddd1;
	--kv-taupe: #8a7f72;
	--kv-danger: #8c3b2e;
	--kv-success: #4f6b4f;
	--kv-shadow: 0 1px 2px rgba(20, 17, 13, 0.06);

	/* ---- Type ---- */
	--kv-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--kv-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kv-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--kv-fs-body: 16px;
	--kv-fs-small: 0.875rem;
	--kv-fs-h1: clamp(2.4rem, 5vw, 4.2rem);
	--kv-fs-h2: clamp(1.8rem, 3.4vw, 2.6rem);
	--kv-fs-h3: clamp(1.25rem, 2vw, 1.6rem);
	--kv-lh-body: 1.65;
	--kv-lh-tight: 1.1;

	/* ---- Spacing scale ---- */
	--kv-space-1: 4px;
	--kv-space-2: 8px;
	--kv-space-3: 16px;
	--kv-space-4: 24px;
	--kv-space-5: 32px;
	--kv-space-6: 48px;
	--kv-space-7: 64px;
	--kv-space-8: 96px;

	/* ---- Layout ---- */
	--kv-max-width: 1280px;
	--kv-radius: 2px;
	--kv-radius-sm: 1px;
	--kv-header-h: 84px;
	--kv-transition: 220ms ease;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--kv-bg: #100e0b;
		--kv-surface: #1a1712;
		--kv-surface-2: #221e18;
		--kv-ink: #f2ede3;
		--kv-ink-muted: #a89c8b;
		--kv-line: #322c22;
		--kv-accent: #d8a878;
		--kv-accent-ink: #100e0b;
		--kv-accent-soft: #2c241b;
		--kv-taupe: #a89c8b;
		--kv-danger: #dd8a7a;
		--kv-success: #96b896;
		--kv-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	}
}

:root[data-theme='dark'] {
	--kv-bg: #100e0b;
	--kv-surface: #1a1712;
	--kv-surface-2: #221e18;
	--kv-ink: #f2ede3;
	--kv-ink-muted: #a89c8b;
	--kv-line: #322c22;
	--kv-accent: #d8a878;
	--kv-accent-ink: #100e0b;
	--kv-accent-soft: #2c241b;
	--kv-taupe: #a89c8b;
	--kv-danger: #dd8a7a;
	--kv-success: #96b896;
	--kv-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/*
 * Forced-dark section — independent of the prefers-color-scheme/data-theme
 * toggle above (that's a whole-site user preference; this is a per-section
 * editorial choice, e.g. the hero or a dark band between light sections).
 * Redefining the same custom properties inside this scope means every
 * existing component class (buttons, cards, nav) keeps working unchanged.
 */
.kv-dark {
	--kv-bg: #0d0b09;
	--kv-surface: #17140f;
	--kv-surface-2: #1f1a14;
	--kv-ink: #f5f0e6;
	--kv-ink-muted: #b3a794;
	--kv-line: #332c22;
	--kv-accent: #d8a878;
	--kv-accent-ink: #0d0b09;
	--kv-accent-soft: #2c2419;
	--kv-taupe: #b3a794;
	--kv-danger: #dd8a7a;
	--kv-success: #96b896;
	--kv-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	background: var(--kv-bg);
	color: var(--kv-ink);
}