/* =========================================================
   EYOKON — Design Tokens v3
   Nouvelle palette verte/earth issue du design project/.
   Source unique des variables de marque (couleurs, typo,
   rayons, ombres, espacements). Consommées par les composants
   et par le pont Blocksy (inc/design-system.php).
   ========================================================= */

:root {
	/* =====================================================
	   PRIMARY — Vert plantation (#22A05A)
	   ===================================================== */
	--ey-primary-50:  #EEFAF2;
	--ey-primary-100: #D4F4E0;
	--ey-primary-200: #A9E8C1;
	--ey-primary-300: #71D49C;
	--ey-primary-400: #3EBB75;
	--ey-primary-500: #22A05A;
	--ey-primary-600: #178048;
	--ey-primary-700: #14663C;
	--ey-primary-800: #125130;
	--ey-primary-900: #104228;
	--ey-primary-950: #072517;

	/* =====================================================
	   SECONDARY — Vert clair (#42A03A)
	   ===================================================== */
	--ey-secondary-50:  #F3FAF0;
	--ey-secondary-100: #E2F4DA;
	--ey-secondary-200: #C1E8B8;
	--ey-secondary-300: #93D58A;
	--ey-secondary-400: #62BC5A;
	--ey-secondary-500: #42A03A;
	--ey-secondary-600: #32802C;
	--ey-secondary-700: #296626;
	--ey-secondary-800: #235222;
	--ey-secondary-900: #1E4420;
	--ey-secondary-950: #0C2710;

	/* =====================================================
	   EARTH — Tons terreux/sable/bois
	   ===================================================== */
	--ey-earth-50:  #FAF7F2;
	--ey-earth-100: #F2EBE0;
	--ey-earth-200: #E4D5BF;
	--ey-earth-300: #D3BB98;
	--ey-earth-400: #BE9D73;
	--ey-earth-500: #AA8455;
	--ey-earth-600: #8E6B41;
	--ey-earth-700: #735436;
	--ey-earth-800: #5E4530;
	--ey-earth-900: #4E3A2A;
	--ey-earth-950: #2A1E16;

	/* =====================================================
	   TERRACOTTA — Or/doré/ambre
	   ===================================================== */
	--ey-terracotta-50:  #FEFBEC;
	--ey-terracotta-100: #FDF4CC;
	--ey-terracotta-200: #FBE88A;
	--ey-terracotta-300: #F9D84D;
	--ey-terracotta-400: #F5C820;
	--ey-terracotta-500: #E0AE0A;
	--ey-terracotta-600: #BB8E06;
	--ey-terracotta-700: #956D09;
	--ey-terracotta-800: #7A570F;
	--ey-terracotta-900: #664812;
	--ey-terracotta-950: #3A2705;

	/* =====================================================
	   GREEN (extra) — pour les overlays héro
	   ===================================================== */
	--ey-green-900: #14532d;
	--ey-green-950: #052e16;

	/* =====================================================
	   Tokens sémantiques de marque
	   ===================================================== */
	--eyokon-primary:        var(--ey-primary-600);
	--eyokon-primary-dark:   var(--ey-primary-700);
	--eyokon-primary-light:  var(--ey-primary-100);
	--eyokon-primary-soft:   var(--ey-primary-400);
	--eyokon-secondary:      var(--ey-secondary-600);
	--eyokon-accent:         var(--ey-terracotta-500);
	--eyokon-highlight:      var(--ey-terracotta-400);
	--eyokon-danger:         #dc2626;

	--eyokon-bg:             var(--ey-earth-50);
	--eyokon-surface:        #FFFFFF;
	--eyokon-surface-tint:   var(--ey-earth-100);
	--eyokon-surface-tint-2: var(--ey-primary-50);
	--eyokon-line:           var(--ey-earth-100);

	--eyokon-ink:            var(--ey-earth-900);
	--eyokon-ink-soft:       var(--ey-earth-500);
	--eyokon-ink-muted:      var(--ey-earth-400);
	--eyokon-headings:       var(--ey-earth-900);

	/* Contre-couleurs */
	--eyokon-on-primary:     #FFFFFF;
	--eyokon-on-accent:      var(--ey-earth-950);
	--eyokon-on-surface-dark: var(--ey-earth-200);

	/* --- Typographie --- */
	--eyokon-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--eyokon-font-sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* --- Rayons (rounded-sm = 0.125rem) --- */
	--eyokon-radius-sm:   0.125rem;
	--eyokon-radius:      0.125rem;
	--eyokon-radius-lg:   0.25rem;
	--eyokon-radius-xl:   0.375rem;
	--eyokon-radius-full: 9999px;

	/* --- Ombres --- */
	--eyokon-shadow-sm:    0 1px 2px rgba(42, 30, 22, .05);
	--eyokon-shadow:       0 1px 3px rgba(42, 30, 22, .1), 0 1px 2px rgba(42, 30, 22, .06);
	--eyokon-shadow-lg:    0 10px 15px -3px rgba(42, 30, 22, .1), 0 4px 6px -4px rgba(42, 30, 22, .1);
	--eyokon-shadow-xl:    0 20px 25px -5px rgba(42, 30, 22, .1), 0 8px 10px -6px rgba(42, 30, 22, .1);
	--eyokon-shadow-2xl:   0 25px 50px -12px rgba(42, 30, 22, .25);

	/* --- Espacement (base 4px) --- */
	--eyokon-space-1: 0.25rem;
	--eyokon-space-2: 0.5rem;
	--eyokon-space-3: 0.75rem;
	--eyokon-space-4: 1rem;
	--eyokon-space-5: 1.25rem;
	--eyokon-space-6: 1.5rem;
	--eyokon-space-8: 2rem;
	--eyokon-space-10: 2.5rem;
	--eyokon-space-12: 3rem;
	--eyokon-space-16: 4rem;
	--eyokon-space-20: 5rem;

	/* --- Durées d'animation --- */
	--eyokon-ease: cubic-bezier(.16, 1, .3, 1);
	--eyokon-duration-fast: 200ms;
	--eyokon-duration: 300ms;
	--eyokon-duration-slow: 500ms;
}

/* =====================================================
   Animations
   ===================================================== */
@keyframes eyokonFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes eyokonSlideUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes eyokonSlideInRight {
	from { opacity: 0; transform: translateX(100%); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes eyokonBounce {
	0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); }
	50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); }
}
@keyframes eyokonPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .5; }
}
@keyframes eyokonSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.ey-animate-fade-in        { animation: eyokonFadeIn .6s ease-out forwards; }
.ey-animate-slide-up       { animation: eyokonSlideUp .6s ease-out forwards; }
.ey-animate-slide-in-right { animation: eyokonSlideInRight .4s ease-out forwards; }
.ey-animate-bounce         { animation: eyokonBounce 1s infinite; }
.ey-animate-pulse          { animation: eyokonPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.ey-animate-spin           { animation: eyokonSpin 1s linear infinite; }

/* Scroll-reveal (JS adds .is-visible) */
.ey-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease-out, transform .6s ease-out;
}
.ey-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ey-animate-fade-in,
	.ey-animate-slide-up,
	.ey-animate-slide-in-right,
	.ey-animate-bounce { animation: none; opacity: 1; transform: none; }
	.ey-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================
   Custom Scrollbar (match design project/)
   ===================================================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ey-earth-100); }
::-webkit-scrollbar-thumb { background: var(--ey-earth-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ey-earth-500); }