/**
 * Design tokens — the single source of truth for color, type, spacing,
 * radius and motion. Every other stylesheet reads from these; nothing
 * hardcodes a hex value or a px size outside this file.
 */

:root {
	/* ---- Brand colors (from brief) ------------------------------------ */
	--color-forest: #173D32;
	--color-sand: #E9E2D3;
	--color-turquoise: #45AFA7;
	--color-offwhite: #F8F7F2;
	--color-charcoal: #242824;

	/* ---- Derived tints/shades ------------------------------------------ */
	--color-forest-dark: #0E261F;
	--color-forest-light: #2C5C4C;
	--color-forest-tint: #E4EBE8;      /* forest at ~8% on offwhite, for subtle fills */
	--color-turquoise-dark: #2C6560; /* darkened from #357F79 for WCAG AA contrast (was ~3.6:1 on sand backgrounds, now ~5.2:1) */
	--color-turquoise-light: #9BD4CF;
	--color-turquoise-tint: #E7F3F2;
	--color-sand-dark: #D9CCAE;
	--color-white: #FFFFFF;
	--color-charcoal-soft: #52584F;     /* secondary text */
	--color-line: rgba(36, 40, 36, 0.12);
	--color-line-on-dark: rgba(248, 247, 242, 0.18);

	/* ---- Semantic roles -------------------------------------------------- */
	--color-bg: var(--color-offwhite);
	--color-bg-alt: var(--color-sand);
	--color-surface: var(--color-white);
	--color-text: var(--color-charcoal);
	--color-text-soft: var(--color-charcoal-soft);
	--color-text-on-dark: var(--color-offwhite);
	--color-text-on-dark-soft: rgba(248, 247, 242, 0.76);
	--color-accent: var(--color-turquoise);
	--color-primary: var(--color-forest);
	--color-link: var(--color-forest);

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

	--text-xs: 0.8125rem;    /* 13px */
	--text-sm: 0.9375rem;    /* 15px */
	--text-base: 1.0625rem;  /* 17px */
	--text-md: 1.1875rem;    /* 19px */
	--text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	--text-2xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.5rem);
	--text-3xl: clamp(2.25rem, 1.65rem + 2.6vw, 3.375rem);
	--text-4xl: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);
	--text-5xl: clamp(3.25rem, 1.9rem + 5.8vw, 6rem);

	--leading-tight: 1.08;
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.08em;
	--tracking-wider: 0.14em;

	/* ---- Spacing scale -------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 5rem;
	--space-16: 6rem;
	--space-20: 8rem;
	--space-24: 10rem;

	--section-pad-y: clamp(4rem, 3.1rem + 4.5vw, 7.5rem);
	--section-pad-y-sm: clamp(3rem, 2.5rem + 2.5vw, 5rem);
	--container-pad-x: clamp(1.25rem, 0.9rem + 1.8vw, 3rem);

	/* ---- Layout -------------------------------------------------- */
	--container-max: 1320px;
	--container-narrow: 760px;
	--container-wide: 1520px;

	/* ---- Radius / shadow / motion -------------------------------------------------- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(23, 61, 50, 0.08);
	--shadow-md: 0 12px 28px -8px rgba(23, 61, 50, 0.22);
	--shadow-lg: 0 28px 60px -16px rgba(23, 61, 50, 0.28);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-fast: 180ms var(--ease);
	--transition-base: 320ms var(--ease);
	--transition-slow: 600ms var(--ease-out);

	--z-nav: 100;
	--z-overlay: 200;
	--z-modal: 300;
}