/**
 * Design tokens.
 * Values read from the supplied design (dark charcoal/near-black sections,
 * warm off-white/cream body background, muted gold-tan accent, coral-free —
 * this kit uses a warm tan/gold accent rather than coral).
 */
:root {
	/* Color */
	--color-bg: #f7f4ef;
	--color-bg-alt: #eee9e0;
	--color-dark: #171717;
	--color-dark-2: #262625;
	--color-text: #1c1c1c;
	--color-text-muted: #6f6b64;
	--color-text-on-dark: #f7f4ef;
	--color-text-on-dark-muted: #b3aea5;
	--color-accent: #b98a4e;
	--color-accent-light: #d9b98a;
	--color-border: #e0dbd0;
	--color-border-on-dark: #3a3937;
	--color-white: #ffffff;
	--color-star: #e8c15a;

	/* Typography */
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Fraunces', Georgia, serif;

	--fs-h1: clamp(2.75rem, 6vw, 5.5rem);
	--fs-h2: clamp(2rem, 3.4vw, 2.75rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.5rem);
	--fs-body: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.75rem;

	--lh-tight: 1.1;
	--lh-heading: 1.25;
	--lh-body: 1.6;

	/* Spacing scale */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8rem;

	/* Layout */
	--container-width: 1200px;
	--container-padding: clamp(1.25rem, 4vw, 2.5rem);
	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 200ms;
	--duration-base: 500ms;
	--duration-slow: 900ms;

	/* Shadow */
	--shadow-card: 0 20px 40px -20px rgba(28, 28, 28, 0.25);
	--shadow-soft: 0 8px 24px -12px rgba(28, 28, 28, 0.15);
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 4px; }
::-webkit-scrollbar-track      { background: var(--color-dark); }
::-webkit-scrollbar-thumb      { background: var(--color-accent); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover{ background: var(--color-star); }