@import 'tailwindcss';

@theme {
	/* ── Fonts ─────────────────────────────────────────────────────── */
	--font-display: 'Fraunces', Georgia, serif;
	--font-sans: 'DM Sans', system-ui, sans-serif;
	--font-mono: 'DM Mono', monospace;

	/* ── Neutrals ───────────────────────────────────────────────────── */
	--color-page: #fafaf7;
	--color-surface: #f5f4ee;
	--color-subtle: #edecea;
	--color-border: #d8d7d0;
	--color-text: #1c1c18;
	--color-text-muted: #6b6a63;

	/* ── Green scale ────────────────────────────────────────────────── */
	--green-tint: #e8f5ea;
	--green-light: #aedcb0;
	--green: #3d8c4a;
	--green-dark: #2e6e39; /* button backgrounds with white text — #3D8C4A gives 4.16:1, fails AA */
	--green-deeper: #1e4a26;

	/* ── Yellow scale ───────────────────────────────────────────────── */
	--yellow-tint: #fdf6d8;
	--yellow-light: #f9e08a;
	--yellow: #f2c12e;
	--yellow-dark: #c49610;
	--yellow-text: #8a6800;

	/* ── Blue scale ─────────────────────────────────────────────────── */
	--blue-tint: #e6f1fb;
	--blue-light: #a4cff4;
	--blue: #2d7dd2;
	--blue-dark: #185fa5;

	/* ── Purple scale ───────────────────────────────────────────────── */
	--purple-tint: #eeedfe;
	--purple: #534ab7;
	--purple-dark: #3c3489;

	/* ── Orange scale ───────────────────────────────────────────────── */
	--orange-tint: #fef0e6;
	--orange: #e8862a;
	--orange-dark: #b46820;

	/* ── Status ─────────────────────────────────────────────────────── */
	--color-error: #dc4c3e;

	/* ── Spacing (8px base grid, 4px half-step) ─────────────────────── */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-11: 44px;
	--space-12: 48px;
	--space-13: 52px;
	--space-14: 56px;
	--space-15: 60px;
	--space-16: 64px;
	--space-17: 68px;
	--space-18: 72px;
	--space-19: 76px;
	--space-20: 80px;

	/* ── Radii ──────────────────────────────────────────────────────── */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px; /* default */
	--radius-lg: 10px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* ── Elevation ──────────────────────────────────────────────────── */
	--shadow-card: 0 1px 3px rgba(28, 28, 24, 0.06), 0 1px 2px rgba(28, 28, 24, 0.04);
	--shadow-raised: 0 4px 12px rgba(28, 28, 24, 0.08), 0 2px 4px rgba(28, 28, 24, 0.04);
	--shadow-overlay: 0 8px 32px rgba(28, 28, 24, 0.12), 0 2px 8px rgba(28, 28, 24, 0.06);

	/* ── Button base tokens ─────────────────────────────────────────── */
	--btn-font-size: 13px;
	--btn-font-weight: 500;
	--btn-letter-spacing: 0.04em;
}