/*
 * Shared design tokens for the Lucytheplug landing page.
 * Keep reusable visual values here; consume them from components and sections.
 */
:root {
	/* Brand and surfaces */
	--color-brand: #3f5945;
	--color-brand-hover: #304638;
	--color-brand-active: #263a2e;
	--color-brand-soft: #e7ece8;
	--color-ink: #172e27;
	--color-ink-inverse: #f4f6f5;
	--color-text: #24312c;
	--color-text-muted: #53615b;
	--color-text-subtle: #737c77;
	--color-page: #f3f5f4;
	--color-surface: #ffffff;
	--color-surface-soft: #e9eeec;
	--color-surface-image: #edf1ef;
	--color-border: #d8dfdb;
	--color-border-strong: #c1cbc5;
	--color-dark: #101f1b;
	--color-dark-soft: #182d26;
	--color-on-dark: #f4f6f5;
	--color-overlay: rgb(10 24 19 / 64%);
	--color-focus: #3f5945;
	--color-success: #2f6b45;
	--color-warning: #946418;
	--color-error: #a43d35;

	/* Typography */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Inter", Arial, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.75rem;
	--font-size-display: clamp(3rem, 5vw, 5.5rem);
	--line-height-tight: 1.05;
	--line-height-heading: 1.15;
	--line-height-body: 1.6;
	--letter-spacing-eyebrow: 0.14em;

	/* Layout and spacing */
	--content-width: 1280px;
	--content-width-wide: 1440px;
	--page-gutter: 40px;
	--section-space: 104px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	/* Shape, depth, and motion */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-pill: 999px;
	--shadow-card: 0 8px 24px rgb(25 54 42 / 6%);
	--shadow-popover: 0 16px 48px rgb(16 36 30 / 14%);
	--transition-fast: 160ms ease;
	--transition-base: 220ms ease;
	--transition-smooth: 600ms cubic-bezier(0.22, 1, 0.36, 1);
	--z-header: 100;
	--z-menu: 200;
	--z-modal: 1000;
}

@media (max-width: 1023px) {
	:root {
		--page-gutter: 28px;
		--section-space: 88px;
	}
}

@media (max-width: 767px) {
	:root {
		--page-gutter: 20px;
		--section-space: 72px;
	}
}