/**
 * CAVAC Design System - Variables & Animations
 * @package Cavac
 */

:root {
	/* Couleurs Logo */
	--cavac-vert-fonce: #006247;
	--cavac-vert-clair: #7aba49;
	--cavac-rouge: #d21b43;
	
	/* Palette étendue */
	--cavac-corail: #ed694b;
	--cavac-turquoise-clair: #acdbdf;
	--cavac-orange: #c87329;
	--cavac-or: #c6af48;
	--cavac-jaune: #ffd240;
	--cavac-vert-pomme: #76b843;
	--cavac-peche: #f4a48f;
	--cavac-vert-menthe: #cce2bd;
	--cavac-bleu: #6387c4;
	--cavac-turquoise: #4bb7a7;
	--cavac-creme: #fde8d1;
	--cavac-terracotta: #ae4625;
	--cavac-miel: #fdd79f;
	--cavac-bleu-fonce: #1768b0;
	
	/* Neutres */
	--cavac-blanc: #ffffff;
	--cavac-noir: #1a1a1a;
	--cavac-gris-900: #212529;
	--cavac-gris-800: #343a40;
	--cavac-gris-700: #495057;
	--cavac-gris-600: #6c757d;
	--cavac-gris-500: #adb5bd;
	--cavac-gris-400: #ced4da;
	--cavac-gris-300: #dee2e6;
	--cavac-gris-200: #e9ecef;
	--cavac-gris-100: #f8f9fa;
	
	/* Sémantiques */
	--color-primary: var(--cavac-vert-fonce);
	--color-primary-light: var(--cavac-vert-clair);
	--color-secondary: var(--cavac-corail);
	--color-accent: var(--cavac-turquoise);
	--color-success: var(--cavac-vert-pomme);
	--color-warning: var(--cavac-jaune);
	--color-danger: var(--cavac-rouge);
	
	/* Pôles */
	--pole-vegetal: #76b843;
	--pole-animal: #c87329;
	--pole-distribution: #1768b0;
	--pole-agroalimentaire: #ed694b;
	--pole-biomateriaux: #4bb7a7;
	
	/* Typo */
	--font-display: 'Brocha', Georgia, serif;
	--font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
	
	--text-xs: clamp(0.7rem, 0.8vw, 0.75rem);
	--text-sm: clamp(0.8rem, 0.9vw, 0.875rem);
	--text-base: clamp(0.95rem, 1vw, 1rem);
	--text-lg: clamp(1.1rem, 1.2vw, 1.125rem);
	--text-xl: clamp(1.2rem, 1.5vw, 1.25rem);
	--text-2xl: clamp(1.4rem, 2vw, 1.5rem);
	--text-3xl: clamp(1.7rem, 2.5vw, 1.875rem);
	--text-4xl: clamp(2rem, 3vw, 2.25rem);
	--text-5xl: clamp(2.5rem, 4vw, 3rem);
	--text-6xl: clamp(3rem, 5vw, 3.75rem);
	--text-7xl: clamp(3.5rem, 6vw, 4.5rem);
	
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;
	
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;
	
	/* Espacement */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;
	
	/* Bordures organiques */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;
	--radius-3xl: 2rem;
	--radius-full: 9999px;
	--radius-blob-1: 60% 40% 50% 50% / 50% 60% 40% 50%;
	--radius-blob-2: 40% 60% 60% 40% / 60% 40% 60% 40%;
	--radius-blob-3: 50% 50% 40% 60% / 40% 60% 50% 50%;
	--radius-organic: 30% 70% 70% 30% / 30% 30% 70% 70%;
	
	/* Ombres */
	--shadow-sm: 0 2px 4px rgba(0, 98, 71, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 98, 71, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 98, 71, 0.1);
	--shadow-xl: 0 16px 48px rgba(0, 98, 71, 0.12);
	--shadow-primary: 0 8px 24px rgba(0, 98, 71, 0.25);
	--shadow-secondary: 0 8px 24px rgba(237, 105, 75, 0.25);
	
	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	
	/* Z-index */
	--z-behind: -1;
	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 99990;
	--z-modal: 500;
	
	/* Layout */
	--container-xl: 1280px;
	--container-2xl: 1440px;
	--header-height: 80px;
}

/* ANIMATIONS */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
	from { opacity: 0; transform: translateX(30px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-15px); }
}

@keyframes floatSlow {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes blobMorph1 {
	0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
	25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
	50% { border-radius: 50% 60% 50% 50% / 40% 50% 60% 50%; }
	75% { border-radius: 40% 60% 40% 60% / 60% 40% 50% 50%; }
}

@keyframes blobMorph2 {
	0%, 100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
	50% { border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%; }
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes bgPan {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Animation classes */
.animate-fadeInUp { animation: fadeInUp 0.6s var(--ease-out-expo) forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s var(--ease-out-expo) forwards; }
.animate-fadeInRight { animation: fadeInRight 0.6s var(--ease-out-expo) forwards; }
.animate-scaleIn { animation: scaleIn 0.5s var(--ease-out-back) forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-floatSlow { animation: floatSlow 8s ease-in-out infinite; }
.animate-blobMorph { animation: blobMorph1 20s ease-in-out infinite; }
.animate-rotate { animation: rotate 20s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* Scroll animations */
[data-animate] { opacity: 0; }
[data-animate].is-visible { opacity: 1; }

[data-animate="fade-up"] {
	transform: translateY(40px);
	transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
[data-animate="fade-up"].is-visible { transform: translateY(0); }

[data-animate="fade-left"] {
	transform: translateX(-40px);
	transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
[data-animate="fade-left"].is-visible { transform: translateX(0); }

[data-animate="fade-right"] {
	transform: translateX(40px);
	transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
[data-animate="fade-right"].is-visible { transform: translateX(0); }

[data-animate="scale"] {
	transform: scale(0.95);
	transition: opacity 0.5s var(--ease-out-back), transform 0.5s var(--ease-out-back);
}
[data-animate="scale"].is-visible { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}