/**
 * AENS — Design tokens
 * Architecture à deux niveaux : primitives puis tokens sémantiques.
 * Les composants n'utilisent JAMAIS les primitives directement.
 *
 * @package aens-theme
 */

/* -------------------------------------------------------------------------
 * 1. PRIMITIVES
 * ---------------------------------------------------------------------- */

:root {
	/* Vert forêt AENS — institution, écologie, permanence */
	--aens-green-950: #002114;
	--aens-green-900: #0f392b;
	--aens-green-800: #012d1d;
	--aens-green-700: #1b4332;
	--aens-green-600: #274e3d;
	--aens-green-500: #3f6653;
	--aens-green-300: #86af99;
	--aens-green-200: #a5d0b9;
	--aens-green-100: #c1ecd4;

	/* Vert vif — action de terrain, énergie, accents */
	--aens-leaf-700: #255100;
	--aens-leaf-600: #1e4500;
	--aens-leaf-500: #69ba2c;
	--aens-leaf-400: #74c637;
	--aens-leaf-300: #8fc62f;
	--aens-leaf-200: #88dc4b;
	--aens-leaf-100: #a3f964;

	/* Terracotta — chaleur humaine, entraide, solidarité */
	--aens-terra-900: #370e00;
	--aens-terra-800: #763215;
	--aens-terra-700: #7c3d23;
	--aens-terra-600: #94492a;
	--aens-terra-400: #fe9e78;
	--aens-terra-300: #ffb599;
	--aens-terra-100: #ffdbce;

	/* Neutres à sous-ton vert */
	--aens-neutral-0:   #ffffff;
	--aens-neutral-25:  #f9f8f3;
	--aens-neutral-50:  #f8fdf9;
	--aens-neutral-75:  #f4f6f0;
	--aens-neutral-100: #f1fcf3;
	--aens-neutral-150: #ebf7ed;
	--aens-neutral-200: #e5f1e7;
	--aens-neutral-250: #e0ebe2;
	--aens-neutral-300: #dae5dc;
	--aens-neutral-400: #c1c8c2;
	--aens-neutral-500: #717973;
	--aens-neutral-600: #414844;
	--aens-neutral-700: #29332c;
	--aens-neutral-800: #212b25;
	--aens-neutral-900: #141e18;
	--aens-neutral-950: #0b1310;

	/* Statuts */
	--aens-success-500: #1e4500;
	--aens-success-300: #88dc4b;
	--aens-success-50:  #eef9e4;
	--aens-warning-500: #94492a;
	--aens-warning-300: #ffb599;
	--aens-warning-50:  #ffdbce;
	--aens-error-700:   #93000a;
	--aens-error-500:   #ba1a1a;
	--aens-error-300:   #ffb4ab;
	--aens-error-50:    #ffdad6;
}

/* -------------------------------------------------------------------------
 * 2. TOKENS SÉMANTIQUES — MODE CLAIR
 * ---------------------------------------------------------------------- */

:root {
	--color-bg-base:      var(--aens-neutral-50);
	--color-bg-surface:   var(--aens-neutral-0);
	--color-bg-subtle:    var(--aens-neutral-150);
	--color-bg-muted:     var(--aens-neutral-250);
	--color-bg-cream:     var(--aens-neutral-75);
	--color-bg-inverse:   var(--aens-green-900);

	--color-surface-green: var(--aens-neutral-100);
	--color-surface-leaf:  rgba(116, 198, 55, 0.18);
	--color-surface-terra: rgba(148, 73, 42, 0.15);

	--color-border:        var(--aens-neutral-400);
	--color-border-subtle: rgba(27, 67, 50, 0.08);
	--color-border-strong: var(--aens-neutral-500);

	--color-text-primary:    var(--aens-neutral-900);
	--color-text-secondary:  var(--aens-neutral-600);
	--color-text-muted:      var(--aens-neutral-500);
	--color-text-inverse:    var(--aens-neutral-0);
	--color-text-link:       var(--aens-green-700);
	--color-text-link-hover: var(--aens-green-900);

	--color-accent:        var(--aens-green-700);
	--color-accent-hover:  var(--aens-green-900);
	--color-accent-subtle: var(--aens-neutral-100);

	--color-cta:       var(--aens-green-700);
	--color-cta-hover: var(--aens-green-900);
	--color-cta-text:  var(--aens-neutral-0);

	--color-cta-vivid:      var(--aens-leaf-400);
	--color-cta-vivid-text: var(--aens-green-900);

	--color-action-warm:       var(--aens-terra-600);
	--color-action-warm-hover: var(--aens-terra-700);
	--color-action-warm-text:  var(--aens-neutral-0);

	--color-focus-ring: var(--aens-leaf-400);
	--color-overlay:    rgba(15, 57, 43, 0.65);

	--color-success: var(--aens-success-500);
	--color-warning: var(--aens-warning-500);
	--color-error:   var(--aens-error-500);

	/* Teintes de badge : contraste AA garanti sur fond clair */
	--color-badge-eco-bg:    var(--color-surface-leaf);
	--color-badge-eco-text:  var(--aens-green-900);
	--color-badge-warm-bg:   var(--color-surface-terra);
	--color-badge-warm-text: #7a381e;
	--color-badge-inst-bg:   rgba(27, 67, 50, 0.12);
	--color-badge-inst-text: var(--aens-green-700);

	/* Surfaces de feedback */
	--color-success-bg: var(--aens-success-50);
	--color-warning-bg: var(--aens-warning-50);
	--color-error-bg:   var(--aens-error-50);
	--color-error-text: var(--aens-error-700);

	/* Décor du héros et des bannières : voile de lisibilité */
	--color-hero-scrim: linear-gradient(
		180deg,
		rgba(15, 57, 43, 0.10) 0%,
		rgba(15, 57, 43, 0.42) 100%
	);
}

/* -------------------------------------------------------------------------
 * 3. TOKENS SÉMANTIQUES — MODE SOMBRE
 * Dérivés des mêmes primitives, sans nouvelle teinte.
 * Élévation par surface, pas par ombre. Jamais de #000 ni de #fff purs.
 * ---------------------------------------------------------------------- */

.dark {
	--color-bg-base:    var(--aens-neutral-950);
	--color-bg-surface: #14201a;
	--color-bg-subtle:  #1b2b23;
	--color-bg-muted:   #24382d;
	--color-bg-cream:   #1b2b23;
	--color-bg-inverse: var(--aens-neutral-100);

	--color-surface-green: #12291f;
	--color-surface-leaf:  rgba(136, 220, 75, 0.16);
	--color-surface-terra: rgba(255, 181, 153, 0.14);

	--color-border:        rgba(218, 229, 220, 0.16);
	--color-border-subtle: rgba(218, 229, 220, 0.10);
	--color-border-strong: rgba(218, 229, 220, 0.28);

	--color-text-primary:    #e8f4ea;
	--color-text-secondary:  var(--aens-neutral-400);
	--color-text-muted:      #a3ada6;
	--color-text-inverse:    var(--aens-neutral-950);
	--color-text-link:       var(--aens-green-200);
	--color-text-link-hover: var(--aens-green-100);

	--color-accent:        var(--aens-green-200);
	--color-accent-hover:  var(--aens-green-100);
	--color-accent-subtle: #12291f;

	--color-cta:       var(--aens-leaf-200);
	--color-cta-hover: var(--aens-leaf-100);
	--color-cta-text:  var(--aens-green-950);

	--color-cta-vivid:      var(--aens-leaf-100);
	--color-cta-vivid-text: var(--aens-green-950);

	--color-action-warm:       var(--aens-terra-300);
	--color-action-warm-hover: var(--aens-terra-100);
	--color-action-warm-text:  var(--aens-terra-900);

	--color-focus-ring: var(--aens-leaf-200);
	--color-overlay:    rgba(0, 0, 0, 0.72);

	--color-success: var(--aens-success-300);
	--color-warning: var(--aens-warning-300);
	--color-error:   var(--aens-error-300);

	--color-badge-eco-bg:    var(--color-surface-leaf);
	--color-badge-eco-text:  var(--aens-leaf-100);
	--color-badge-warm-bg:   var(--color-surface-terra);
	--color-badge-warm-text: var(--aens-terra-300);
	--color-badge-inst-bg:   rgba(165, 208, 185, 0.16);
	--color-badge-inst-text: var(--aens-green-200);

	--color-success-bg: rgba(136, 220, 75, 0.12);
	--color-warning-bg: rgba(255, 181, 153, 0.12);
	--color-error-bg:   rgba(255, 180, 171, 0.12);
	--color-error-text: var(--aens-error-300);

	--color-hero-scrim: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.32) 0%,
		rgba(0, 0, 0, 0.66) 100%
	);

	/* En sombre, les ombres cèdent la place à l'élévation de surface. */
	--shadow-1: none;
	--shadow-2: none;
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
 * 4. ESPACEMENT, FORMES, ÉLÉVATION, MOTION, TYPOGRAPHIE
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6rem;

	--gutter-mobile:  1rem;
	--gutter-desktop: 1.5rem;
	--margin-mobile:  1.25rem;
	--margin-desktop: 3rem;

	--container-md:  768px;
	--container-lg:  1024px;
	--container-xl:  1280px;
	--container-2xl: 1400px;
	--measure: 70ch;

	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   1rem;
	--radius-xl:   1.5rem;
	--radius-full: 9999px;

	--shadow-1: 0 4px 20px -2px rgba(15, 57, 43, 0.06), 0 2px 6px -1px rgba(27, 67, 50, 0.04);
	--shadow-2: 0 12px 32px -4px rgba(15, 57, 43, 0.12), 0 4px 12px -2px rgba(148, 73, 42, 0.08);

	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-slow: 300ms;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Familles */
	--font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-body:    "Inter", "Segoe UI", Arial, sans-serif;

	/* Échelle typographique */
	--text-display-xl:  clamp(2.25rem, 4.5vw, 3.5rem);
	--text-headline-lg: clamp(1.75rem, 3.2vw, 2.5rem);
	--text-headline-md: 1.875rem;
	--text-headline-sm: 1.375rem;
	--text-title-md:    1.125rem;
	--text-body-lg:     1.125rem;
	--text-body-md:     1rem;
	--text-body-sm:     0.875rem;
	--text-label-lg:    0.875rem;
	--text-label-sm:    0.75rem;

	/* Empilement */
	--z-header:      100;
	--z-dropdown:    200;
	--z-tooltip:     300;
	--z-mobile-menu: 1000;
	--z-modal:       1100;
	--z-toast:       1200;

	/* Cible tactile minimale */
	--tap-target: 44px;
}

/* -------------------------------------------------------------------------
 * 5. MOTION RÉDUITE
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 1ms;
		--dur-base: 1ms;
		--dur-slow: 1ms;
	}
}