/**
 * Food4Biodiv CSS Variables
 * Global design tokens for consistent styling
 */

:root {
	/* Brand Colors (RGB values for opacity support) */
	--f4b-color-primary: 40, 71, 56; /* #284738 - Dark green */

	--f4b-color-black: 45, 45, 45; /* #2d2d2d */
	--f4b-color-white: 255, 255, 255; /* #ffffff */
	--f4b-color-orange: 250, 100, 0; /* #fa6400 - DO NOT USE */
	--f4b-color-gray: 102, 102, 102; /* #666666 - Medium gray */
	--f4b-color-gray-light: 102, 105, 98; /* #666962 - Light gray-green */

	--f4b-color-background: 245, 249, 240; /* #f5f9f0 - Light green/beige */

	--f4b-color-background-dark: var(--f4b-color-primary); /* Alias for primary */
	
	/* Spacing System (based on 16px) */
	--f4b-spacing-base: 16px;
	--f4b-spacing-xs: 8px;
	--f4b-spacing-sm: 12px;
	--f4b-spacing-md: 16px;
	--f4b-spacing-lg: 24px;
	--f4b-spacing-xl: 32px;
	--f4b-spacing-xxl: 48px;
	--f4b-spacing-xxxl: 64px;
	
	/* Typography */
	--f4b-font-size-xs: 12px;
	--f4b-font-size-sm: 14px;
	--f4b-font-size-md: 16px;
	--f4b-font-size-lg: 18px;
	--f4b-font-size-xl: 20px;
	--f4b-font-size-xxl: 24px;
	--f4b-font-size-xxxl: 32px;
	
	--f4b-line-height-tight: 1.2;
	--f4b-line-height-normal: 1.5;
	--f4b-line-height-relaxed: 1.75;
	
	/* Transitions */
	--f4b-transition-fast: 150ms ease;
	--f4b-transition-normal: 300ms ease;
	--f4b-transition-slow: 500ms ease;
	
	/* Border Radius */
	--f4b-border-radius-sm: 4px;
	--f4b-border-radius-md: 8px;
	--f4b-border-radius-lg: 12px;
	--f4b-border-radius-xl: 20px;
	--f4b-border-radius-round: 50%;
	
	/* Shadows */
	--f4b-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--f4b-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--f4b-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
	
	/* Z-Index Scale */
	--f4b-z-dropdown: 100;
	--f4b-z-modal: 1000;
	--f4b-z-tooltip: 1100;
	
	/* Breakpoints (for reference in media queries) */
	--f4b-breakpoint-mobile: 569px;
	--f4b-breakpoint-tablet: 960px;
	--f4b-breakpoint-desktop: 1200px;
}