/*
 * Design tokens from the existing Sabina Smolová palette.
 * Keep HEX values in sync with theme.json.
 */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
	:root {
		--color-base: #efe9e9;
		--color-surface: #ffffff;
		--color-ink: #00387c;
		--color-muted: #3e5168;
		--color-line: #d8d8d8;
		--color-accent: #a6780c;
		--color-accent-text: #7a5c12;
		--color-focus: #00387c;

		--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

		--text-s: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
		--text-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
		--text-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
		--text-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
		--text-display: clamp(2.15rem, 1.2rem + 3.2vw, 4.25rem);

		--leading-body: 1.6;
		--leading-heading: 1.15;

		--space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
		--space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
		--space-s: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
		--space-m: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
		--space-l: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
		--space-xl: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

		--content: 42rem;
		--wide: 72rem;
		--gutter: var(--space-m);

		--radius: 0.25rem;
		--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
		--duration: 200ms;
	}
}