/* Makkaani design tokens — single source of truth for the visual identity. */

:root {
	/* Color */
	--ink: #141414;
	--ink-soft: #3a3a3a;
	--sand: #f6f1ea;
	--surface: #ffffff;
	--gold: #b08a3e;
	--gold-soft: #e9dcc2;
	--line: #e4ded4;
	--overlay: rgba(20, 20, 20, 0.45);
	--overlay-strong: rgba(20, 20, 20, 0.62);

	/* Theme chrome — intentionally dark UI (footer, newsletter, buttons) that
	   stays dark in BOTH modes, with light text on top. */
	--chrome-bg: #141414;
	--chrome-fg: #ffffff;
	--nav-bg: rgba(246, 241, 234, 0.88);

	/* Typography */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--fs-display: clamp(2.5rem, 6vw, 4.5rem);
	--fs-h1: clamp(2rem, 4vw, 3rem);
	--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
	--fs-h3: 1.375rem;
	--fs-body: 1.125rem;
	--fs-small: 0.875rem;
	--fs-label: 0.75rem;

	--lh-tight: 1.08;
	--lh-snug: 1.25;
	--lh-body: 1.7;

	/* Spacing (8pt scale) */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;

	/* Layout */
	--wrap: 1240px;
	--measure: 68ch;
	--radius: 4px;
	--nav-h: 68px;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0.001s;
	}
}

/* ---------- Dark mode ----------
   Strategy: follow the OS preference automatically, but let an explicit
   data-theme attribute (set by the nav toggle, persisted in localStorage)
   override it either way. The dark values are defined once and applied via
   both selectors below. */

[data-theme="dark"],
:root.is-dark {
	--ink: #f4ede2;
	--ink-soft: #c7bfb1;
	--sand: #14110d;
	--surface: #1e1a15;
	--gold: #cda657;
	--gold-soft: #5f5130;
	--line: #322c22;
	--overlay: rgba(0, 0, 0, 0.5);
	--overlay-strong: rgba(0, 0, 0, 0.66);
	--chrome-bg: #0e0c09;
	--chrome-fg: #ffffff;
	--nav-bg: rgba(20, 17, 13, 0.85);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #f4ede2;
		--ink-soft: #c7bfb1;
		--sand: #14110d;
		--surface: #1e1a15;
		--gold: #cda657;
		--gold-soft: #5f5130;
		--line: #322c22;
		--overlay: rgba(0, 0, 0, 0.5);
		--overlay-strong: rgba(0, 0, 0, 0.66);
		--chrome-bg: #0e0c09;
		--chrome-fg: #ffffff;
		--nav-bg: rgba(20, 17, 13, 0.85);
		color-scheme: dark;
	}
}