/**
 * Fischer Bell CSS Variables Design Tokens
 */

:root {
	/* Color Palette (Pantone 376 C and Process Black C Aligned) */
	--color-primary: #84BD00;
	--color-primary-dark: #689500;
	--color-primary-darker: #4D6E00;
	--color-primary-light: #9AD500;
	--color-primary-subtle: #F3F9E6;
	--color-accent: #FF6B2C;
	--color-accent-hover: #E85A1F;
	--color-surface: #FAFBF8;
	--color-surface-alt: #F2F4EF;
	--color-surface-dark: #27251F;
	--color-text: #27251F;
	--color-text-muted: #5A6A7A;
	--color-text-inverse: #F0F4EC;
	--color-success: #16A34A;
	--color-warning: #F59E0B;
	--color-danger: #DC2626;
	--color-border: #E2E8F0;

	/* Typography */
	--font-heading: 'Outfit', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Fluid Typography (clamp sizing for responsiveness) */
	--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--font-size-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	--font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--font-size-3xl: clamp(2rem, 1.75rem + 1vw, 2.75rem);
	--font-size-4xl: clamp(2.5rem, 2.1rem + 1.6vw, 3.75rem);

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Borders */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(39, 37, 31, 0.08);
	--shadow-md: 0 4px 12px rgba(39, 37, 31, 0.1);
	--shadow-lg: 0 8px 30px rgba(39, 37, 31, 0.12);
	--shadow-xl: 0 16px 48px rgba(39, 37, 31, 0.15);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow: 400ms ease;
}