/**
 * CAVAC Design System - Blobs, Backgrounds & Typography
 * @package Cavac
 */

/* BLOBS */
.blob {
	position: absolute;
	pointer-events: none;
	z-index: var(--z-behind);
}

.blob-1 {
	width: 400px;
	height: 400px;
	background: var(--cavac-vert-menthe);
	border-radius: var(--radius-blob-1);
	opacity: 0.6;
	animation: blobMorph1 15s ease-in-out infinite, float 20s ease-in-out infinite;
}

.blob-2 {
	width: 300px;
	height: 350px;
	background: var(--cavac-turquoise-clair);
	border-radius: var(--radius-blob-2);
	opacity: 0.5;
	animation: blobMorph2 18s ease-in-out infinite, floatSlow 25s ease-in-out infinite;
}

.blob-3 {
	width: 250px;
	height: 280px;
	background: var(--cavac-peche);
	border-radius: var(--radius-blob-3);
	opacity: 0.4;
	animation: blobMorph1 12s ease-in-out infinite reverse;
}

.blob-4 {
	width: 350px;
	height: 320px;
	background: var(--cavac-miel);
	border-radius: var(--radius-blob-1);
	opacity: 0.5;
	animation: blobMorph2 20s ease-in-out infinite;
}

.blob-gradient-green { background: linear-gradient(135deg, var(--cavac-vert-menthe) 0%, var(--cavac-turquoise-clair) 100%); }
.blob-gradient-warm { background: linear-gradient(135deg, var(--cavac-peche) 0%, var(--cavac-miel) 100%); }
.blob-gradient-cool { background: linear-gradient(135deg, var(--cavac-turquoise-clair) 0%, var(--cavac-bleu) 100%); }

.blob-sm { width: 150px; height: 150px; }
.blob-md { width: 250px; height: 250px; }
.blob-lg { width: 400px; height: 400px; }
.blob-xl { width: 600px; height: 600px; }

.blob-top-left { top: -10%; left: -5%; }
.blob-top-right { top: -5%; right: -10%; }
.blob-bottom-left { bottom: -15%; left: -10%; }
.blob-bottom-right { bottom: -10%; right: -5%; }

.svg-blob {
	position: absolute;
	pointer-events: none;
	z-index: var(--z-behind);
	opacity: 0.6;
}
.svg-blob svg { width: 100%; height: 100%; }

/* BACKGROUNDS */
.bg-primary { background-color: var(--cavac-vert-fonce); }
.bg-primary-light { background-color: var(--cavac-vert-clair); }
.bg-secondary { background-color: var(--cavac-corail); }
.bg-accent { background-color: var(--cavac-turquoise); }
.bg-cream { background-color: var(--cavac-creme); }
.bg-mint { background-color: var(--cavac-vert-menthe); }
.bg-light { background-color: var(--cavac-gris-100); }

.bg-gradient-primary { background: linear-gradient(135deg, var(--cavac-vert-fonce) 0%, var(--cavac-vert-clair) 100%); }
.bg-gradient-warm { background: linear-gradient(135deg, var(--cavac-corail) 0%, var(--cavac-jaune) 100%); }
.bg-gradient-cool { background: linear-gradient(135deg, var(--cavac-turquoise) 0%, var(--cavac-bleu) 100%); }
.bg-gradient-earth { background: linear-gradient(135deg, var(--cavac-miel) 0%, var(--cavac-orange) 100%); }
.bg-gradient-soft { background: linear-gradient(180deg, var(--cavac-creme) 0%, var(--cavac-blanc) 100%); }

.bg-gradient-animated {
	background: linear-gradient(-45deg, var(--cavac-vert-fonce), var(--cavac-vert-clair), var(--cavac-turquoise), var(--cavac-vert-menthe));
	background-size: 400% 400%;
	animation: bgPan 15s ease infinite;
}

.bg-mesh {
	background-color: var(--cavac-blanc);
	background-image:
		radial-gradient(at 40% 20%, var(--cavac-vert-menthe) 0px, transparent 50%),
		radial-gradient(at 80% 0%, var(--cavac-turquoise-clair) 0px, transparent 50%),
		radial-gradient(at 0% 50%, var(--cavac-creme) 0px, transparent 50%),
		radial-gradient(at 80% 50%, var(--cavac-peche) 0px, transparent 50%),
		radial-gradient(at 0% 100%, var(--cavac-miel) 0px, transparent 50%);
}

.bg-dots {
	background-image: radial-gradient(var(--cavac-gris-300) 1px, transparent 1px);
	background-size: 20px 20px;
}

.bg-wave {
	position: relative;
	overflow: hidden;
}
.bg-wave::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23cce2bd' fill-opacity='0.5' d='M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L0,120Z'/%3E%3C/svg%3E") no-repeat bottom;
	background-size: cover;
	pointer-events: none;
}

/* TYPOGRAPHY */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--cavac-gris-800);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--cavac-vert-fonce);
	margin-bottom: var(--space-4);
}

h1, .h1 { font-size: var(--text-6xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-5xl); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--text-4xl); }
h4, .h4 { font-size: var(--text-3xl); }
h5, .h5 { font-size: var(--text-2xl); }
h6, .h6 { font-size: var(--text-xl); }

.display-1 {
	font-size: var(--text-7xl);
	font-weight: var(--font-extrabold);
	letter-spacing: -0.03em;
	line-height: var(--leading-none);
}

.lead {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	color: var(--cavac-gris-700);
}

.lead-lg { font-size: var(--text-2xl); }

.text-gradient {
	background: linear-gradient(135deg, var(--cavac-vert-fonce) 0%, var(--cavac-vert-clair) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.text-gradient-warm {
	background: linear-gradient(135deg, var(--cavac-corail) 0%, var(--cavac-jaune) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.overline, .eyebrow {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cavac-vert-clair);
}

/* Text colors */
.text-primary { color: var(--cavac-vert-fonce); }
.text-primary-light { color: var(--cavac-vert-clair); }
.text-secondary { color: var(--cavac-corail); }
.text-accent { color: var(--cavac-turquoise); }
.text-muted { color: var(--cavac-gris-600); }
.text-white { color: var(--cavac-blanc); }

/* LAYOUT */
.container {
	width: 100%;
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--space-6);
}
.container-lg { max-width: 1024px; }
.container-2xl { max-width: var(--container-2xl); }

.section {
	position: relative;
	padding: var(--space-20) 0;
}
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-32) 0; }

.section-divider::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23fff' d='M0,0 C320,100 720,100 1440,0 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Utilities */
.rounded-blob { border-radius: var(--radius-blob-1); }
.rounded-organic { border-radius: var(--radius-organic); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.z-behind { z-index: var(--z-behind); }