/*
 * tokens.css — front-end copy of the design tokens.
 * Mirrors the :root block in style.css so the front end never depends on the
 * theme stylesheet being enqueued. Keep the two in sync.
 *
 * Typography uses the system stacks in --sk-font-*. If bespoke webfonts are
 * added later, place the .woff2 files in assets/fonts/, restore matching
 * @font-face rules here, and preload them from inc/enqueue.php.
 */

:root {
	--sk-bg: #FFFFFF;
	--sk-panel: #F5F6F1;
	--sk-panel-2: #EAEDE3;
	--sk-hairline: rgba(24, 36, 28, 0.12);

	--sk-brass-deep: #0E4A30;
	--sk-brass-core: #156B45;
	--sk-brass-mid: #1E8A5A;
	--sk-brass-high: #43C98A;
	--sk-brass-sheen: #7FD9AC;

	--sk-text: #16211B;
	--sk-muted: #586259;
	--sk-text-on-brass: #1A1206;

	--sk-sheen: linear-gradient(135deg, #0E4A30 0%, #1E8A5A 40%, #2FA06A 50%, #1E8A5A 60%, #0E4A30 100%);
	--sk-sheen-sweep: linear-gradient(120deg, #156B45 0%, #156B45 35%, #2FA06A 50%, #156B45 65%, #156B45 100%);

	--sk-font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--sk-step--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.95rem);
	--sk-step-0: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	--sk-step-1: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
	--sk-step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
	--sk-step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
	--sk-step-4: clamp(2.5rem, 1.8rem + 3vw, 4.4rem);

	--sk-leading-body: 1.65;
	--sk-leading-tight: 1.08;

	--sk-space-1: 0.5rem;
	--sk-space-2: 1rem;
	--sk-space-3: 1.5rem;
	--sk-space-4: 2rem;
	--sk-space-5: 3rem;
	--sk-space-6: 4rem;
	--sk-section: clamp(4rem, 10vw, 9rem);

	--sk-maxw: 1280px;
	--sk-maxw-narrow: 820px;
	--sk-gutter: clamp(1.25rem, 4vw, 3rem);
	--sk-radius: 14px;
	--sk-radius-sm: 8px;

	--sk-shadow-soft: 0 18px 50px rgba(30, 42, 30, 0.12);
	--sk-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(24, 36, 28, 0.06);
	--sk-glow: 0 0 50px rgba(30, 138, 90, 0.18);
	--sk-shadow-3d: 0 2px 4px rgba(30,42,30,0.08), 0 8px 16px rgba(30,42,30,0.08), 0 24px 48px rgba(30,42,30,0.12);
	--sk-perspective: 1000px;

	--sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--sk-dur: 560ms;
	--sk-dur-fast: 320ms;

	color-scheme: light;
}

:root.theme-dark {
	--sk-bg: #0E1612;
	--sk-panel: #141F19;
	--sk-panel-2: #1A2821;
	--sk-hairline: rgba(67, 201, 138, 0.20);
	--sk-brass-deep: #156B45;
	--sk-brass-core: #2E8B57;
	--sk-brass-mid: #43C98A;
	--sk-brass-high: #8FE9BE;
	--sk-brass-sheen: #D6FBE8;
	--sk-text: #F2EEE2;
	--sk-muted: #A8AC9C;
	--sk-text-on-brass: #0E1612;
	--sk-sheen: linear-gradient(135deg, #156B45 0%, #43C98A 40%, #D6FBE8 50%, #43C98A 60%, #156B45 100%);
	--sk-sheen-sweep: linear-gradient(120deg, #2E8B57 0%, #2E8B57 35%, #D6FBE8 50%, #2E8B57 65%, #2E8B57 100%);
	--sk-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.55);
	--sk-shadow-inset: inset 0 1px 0 rgba(150, 235, 195, 0.07), inset 0 0 0 1px rgba(67, 201, 138, 0.12);
	--sk-glow: 0 0 60px rgba(67, 201, 138, 0.20);
	--sk-shadow-3d: 0 2px 4px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.4), 0 24px 48px rgba(0,0,0,0.45);
	color-scheme: dark;
}