/**
 * CSS Variables - Color Palette and Design Tokens
 * Based on Mente Reproductiva brand design
 */

/* Global box model - padding/border included in width to prevent horizontal scroll */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* Primary Colors */
	--color-primary-dark-green: #274e2d;
	--color-primary-dark-green-alt: #2B4931;
	--color-primary-beige: #f2efe8;
	--color-primary-beige-alt: #F5F3ED;
	/* fallback colors */
	--color-primary-sage: #5F7D61;
	--color-primary-sage-soft: #DDE6DF;
	--color-primary-warm-sand: #D8C2A8;
	--color-primary-warm-sand-dark: #C9AF93;
	/* Accent Colors */
	--color-accent-peach: #E8C4B8;
	--color-accent-peach-light: #F4D9D0;
	
	/* Text Colors */
	--color-text-dark: #2B4931;
	--color-text-dark-alt: #1a1a1a;
	--color-text-light: #ffffff;
	--color-text-medium: #47423D;
	--color-text-medium-alt: #3a3632;
	
	/* Background Colors */
	--color-bg-light: #f2efe8;
	--color-bg-dark: #243f29;
	--color-bg-form: #47423D;
	--color-bg-form-alt: #3a3632;
	--color-bg-programs: #906236;
	--color-bg-programs-alt: #A9794A;
	--color-bg-programs-card-dark: rgba(255, 255, 255, .8);
	--color-bg-programs-light: #FAF7F2;
	--color-bg-programs-card-light: #ffffff;
	/* fallback colors */
	--color-bg-sage-light: #EEF4EF;
	--color-bg-warm-light: #FAF7F2;
	/* #d4c196 */
	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-xxl: 4rem;
	
	/* Border Radius */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;
	--border-radius-xxl: 32px;
	
	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
	
	/* Z-index layers */
	--z-index-dropdown: 1000;
	--z-index-sticky: 1020;
	--z-index-fixed: 1030;
	--z-index-modal-backdrop: 1040;
	--z-index-modal: 1050;
	--z-index-popover: 1060;
	--z-index-tooltip: 1070;
	--z-index-preloader: 9999;
}