/* ============================================ */
/* VARIABLES & DARK THEME - VERSION CORRIGÉE   */
/* Préserve gradients + garantit lisibilité    */
/* ============================================ */

:root {
	/* ============================= */
	/* PALETTE DARK MODE OPTIMISÉE  */
	/* ============================= */

	/* Fonds - Hiérarchie de noirs */
	--dark-bg-0: #000000;
	--dark-bg-1: #0a0a0a;
	--dark-bg-2: #121212;
	--dark-bg-3: #1a1a1a;
	--dark-bg-4: #242424;
	--dark-bg-5: #2a2a2a;

	/* Couleurs principales - Contraste RENFORCÉ */
	--dark-primary: #7da8f5; /* Bleu plus clair */
	--dark-primary-hover: #91bbff;
	--dark-primary-light: #a8c7ff; /* Bleu ultra clair */

	--dark-secondary: #c4b5fd; /* Violet plus clair */
	--dark-secondary-hover: #ddd6fe;

	/* États et alertes - Haute visibilité */
	--dark-success: #86efac; /* Vert plus clair */
	--dark-warning: #fde047; /* Jaune plus vif */
	--dark-danger: #fca5a5; /* Rouge plus clair */
	--dark-info: #7dd3fc; /* Cyan plus vif */

	/* Textes - Hiérarchie RENFORCÉE sans !important */
	--dark-text-primary: #ffffff;
	--dark-text-secondary: #f3f4f6; /* Plus clair */
	--dark-text-tertiary: #d1d5db; /* Plus clair */
	--dark-text-muted: #9ca3af;
	--dark-text-disabled: #6b7280;

	/* Bordures avec meilleur contraste */
	--dark-border: rgba(255, 255, 255, 0.12);
	--dark-border-hover: rgba(255, 255, 255, 0.2);
	--dark-border-focus: rgba(125, 168, 245, 0.6);
	--dark-border-active: rgba(125, 168, 245, 0.9);

	/* ============================= */
	/* GRADIENTS OPTIMISÉS           */
	/* ============================= */

	--gradient-primary: linear-gradient(
		135deg,
		var(--dark-primary) 0%,
		var(--dark-secondary) 100%
	);

	/* Gradients TEXTE plus clairs */
	--gradient-text-primary: linear-gradient(
		270deg,
		#a8c7ff 0%,
		#ddd6fe 35%,
		#a8c7ff 70%,
		#bbd4ff 100%
	);

	--gradient-text-brand: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%);

	--gradient-text-success: linear-gradient(135deg, #86efac 0%, #6ee7b7 100%);

	/* Gradients UI */
	--gradient-secondary: linear-gradient(
		135deg,
		var(--dark-secondary) 0%,
		#ddd6fe 100%
	);
	--gradient-accent: linear-gradient(
		135deg,
		var(--dark-info) 0%,
		var(--dark-primary) 100%
	);
	--gradient-success: linear-gradient(
		135deg,
		var(--dark-success) 0%,
		#6ee7b7 100%
	);
	--gradient-warning: linear-gradient(
		135deg,
		var(--dark-warning) 0%,
		#facc15 100%
	);
	--gradient-danger: linear-gradient(
		135deg,
		var(--dark-danger) 0%,
		#f87171 100%
	);
	--gradient-dark: linear-gradient(
		135deg,
		var(--dark-bg-2) 0%,
		var(--dark-bg-3) 100%
	);

	/* Gradient mesh renforcé */
	--gradient-mesh: radial-gradient(
			at 40% 20%,
			hsla(215, 80%, 80%, 0.4) 0px,
			transparent 50%
		),
		radial-gradient(at 80% 0%, hsla(260, 70%, 85%, 0.4) 0px, transparent 50%),
		radial-gradient(at 0% 50%, hsla(190, 85%, 80%, 0.4) 0px, transparent 50%),
		radial-gradient(at 80% 50%, hsla(220, 75%, 75%, 0.4) 0px, transparent 50%),
		radial-gradient(at 0% 100%, hsla(240, 70%, 80%, 0.4) 0px, transparent 50%);

	/* ============================= */
	/* EFFETS VISUELS                */
	/* ============================= */

	/* Glass Morphism */
	--glass-bg: rgba(255, 255, 255, 0.05);
	--glass-bg-hover: rgba(255, 255, 255, 0.08);
	--glass-border: rgba(255, 255, 255, 0.12);
	--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
	--glass-blur: blur(16px);

	/* Ombres optimisées */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.9);
	--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.9);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.9),
		0 2px 4px -1px rgba(0, 0, 0, 0.7);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.9),
		0 4px 6px -2px rgba(0, 0, 0, 0.7);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9),
		0 10px 10px -5px rgba(0, 0, 0, 0.7);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.95);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.7);

	/* Lueurs colorées */
	--shadow-glow-primary: 0 0 25px rgba(125, 168, 245, 0.5);
	--shadow-glow-primary-lg: 0 0 45px rgba(125, 168, 245, 0.7);
	--shadow-glow-secondary: 0 0 25px rgba(196, 181, 253, 0.5);
	--shadow-glow-success: 0 0 25px rgba(134, 239, 172, 0.4);
	--shadow-glow-warning: 0 0 25px rgba(253, 224, 71, 0.4);
	--shadow-glow-danger: 0 0 25px rgba(252, 165, 165, 0.4);

	/* ============================= */
	/* ESPACEMENTS                   */
	/* ============================= */

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

	/* ============================= */
	/* BORDURES                      */
	/* ============================= */

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

	/* ============================= */
	/* TRANSITIONS                   */
	/* ============================= */

	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
	--transition-slower: 500ms ease;
	--transition-spring: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* ============================= */
	/* TYPOGRAPHIE                   */
	/* ============================= */

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', sans-serif;
	--font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;
	--text-7xl: 4.5rem;

	--font-thin: 100;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;
	--font-black: 900;

	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* ============================= */
	/* Z-INDEX                       */
	/* ============================= */

	--z-0: 0;
	--z-10: 10;
	--z-20: 20;
	--z-30: 30;
	--z-40: 40;
	--z-50: 50;
	--z-60: 60;
	--z-70: 70;
	--z-80: 80;
	--z-90: 90;
	--z-100: 100;
	--z-max: 9999;

	/* ============================= */
	/* CONTENEURS                    */
	/* ============================= */

	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* ============================= */
	/* BREAKPOINTS                   */
	/* ============================= */

	--screen-sm: 640px;
	--screen-md: 768px;
	--screen-lg: 1024px;
	--screen-xl: 1280px;
	--screen-2xl: 1536px;

	/* ============================= */
	/* COMPATIBILITÉ LEGACY         */
	/* ============================= */

	--bg-dark: var(--dark-bg-0);
	--bg-dark-secondary: var(--dark-bg-2);
	--bg-dark-tertiary: var(--dark-bg-3);
	--bg-light: var(--dark-bg-1);
	--bg-light-secondary: var(--dark-bg-2);
	--bg-light-tertiary: var(--dark-bg-3);

	--text-primary: var(--dark-text-primary);
	--text-secondary: var(--dark-text-secondary);
	--text-tertiary: var(--dark-text-tertiary);
	--text-inverse: var(--dark-text-primary);
	--text-muted: var(--dark-text-muted);

	--border-color: var(--dark-border);

	--success: var(--dark-success);
	--warning: var(--dark-warning);
	--danger: var(--dark-danger);
	--info: var(--dark-info);
}

/* ============================= */
/* CUSTOM PROPERTIES ANIMÉES     */
/* ============================= */

@property --gradient-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@property --glow-opacity {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}

/* ============================= */
/* SURCHARGE PROGRESSIVE MOBILE   */
/* Pas de !important pour gradients */
/* ============================= */

@media (max-width: 768px) {
	:root {
		/* Renforcé mais sans !important */
		--dark-text-primary: #ffffff;
		--dark-text-secondary: #f9fafb;
		--dark-primary: #7da8f5;
		--dark-primary-light: #a8c7ff;
		--dark-bg-0: #000000;
		--dark-bg-2: #121212;

		/* Espacements mobile */
		--space-md: 1.125rem;
		--space-lg: 1.75rem;
		--text-base: 1.0625rem;
		--text-sm: 0.9375rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Renforcé pour mode sombre système */
		--dark-text-primary: #ffffff;
		--dark-text-secondary: #f9fafb;
		--dark-primary: #7da8f5;
		--dark-primary-light: #a8c7ff;
		--dark-bg-0: #000000;
	}
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
	:root {
		--dark-primary: #bbd4ff;
		--dark-primary-hover: #d1ddff;
		--dark-secondary: #ddd6fe;
		--dark-text-secondary: #ffffff;
		--dark-text-tertiary: #f3f4f6;
		--dark-border: rgba(255, 255, 255, 0.25);
		--dark-border-hover: rgba(255, 255, 255, 0.35);
	}
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0.01ms;
		--transition-base: 0.01ms;
		--transition-slow: 0.01ms;
		--transition-slower: 0.01ms;
		--transition-spring: 0.01ms;
		--transition-bounce: 0.01ms;
	}
}

/* OLED/AMOLED */
@media (prefers-color-scheme: dark) and (display-mode: standalone) {
	:root {
		--dark-bg-0: #000000;
	}
}