/* ==================== VARIABLES CSS ==================== */

:root {
	/* Couleurs principales - Thème Clair (défaut) */
	--color-primary: #497B6D;
	--color-accent: #7FD8BE;
	--color-orange: #FF8B28;
	--color-orange-light: #FFAC65;
	--color-orange-dark: #FF9C47;
	--color-bg-light: #E8E8E8;
	--color-shadow: #464646;
	--color-text: #2E2E2E;
	--color-text-muted: #8B8B8B;
	--color-bg-gradient-start: #FFBD84;
	--color-bg-gradient-end: #FF9C47;

	/* Couleurs des cadres blancs */
	--frame-white-light: #F7F7F7;
	--frame-white-top: #F0F0F0;
	--frame-white-mid: #EDEDED;
	--frame-white-bottom: #EAEAEA;
	--frame-white-dark: #E3E3E3;

	/* Couleurs des cadres argent */
	--frame-silver-light: #C9CBD5;
	--frame-silver-top: #B5B6C3;
	--frame-silver-mid: #A1A2B0;
	--frame-silver-bottom: #8D8D9E;
	--frame-silver-dark: #7A788B;

	/* Couleurs des cadres or */
	--frame-gold-light: #B9A475;
	--frame-gold-top: #B0986A;
	--frame-gold-mid: #A68D5F;
	--frame-gold-bottom: #9D8154;
	--frame-gold-dark: #937549;

	/* Composants spécifiques - Thème Clair */
	--container-gradient-start: #FFDEC2;
	--container-gradient-end: #FFAC65;
	--container-border: #A4E3D1;
	--page-borders-gradient-end: #FFCDA3;
	--page-borders-border: #C8EEE3;
	--section-border-top: #FFCDA3;
	--section-border-side: #EDF9F6;
	--section-border-bottom: #FFAC65;
	--footer-gradient-start: #FFCDA3;
	--footer-gradient-end: #FFBD84;
	--footer-border: #FF8B28;
	--menu-gradient-start: #FFDEC2;
	--menu-gradient-end: #FFCDA3;
	--menu-border: #FFAC65;
	--container-bg: rgba(255, 255, 255, 0.8);
	--page-borders-bg: rgba(240, 240, 240, 0.6);
	--header-gradient-start: #F4F4F4;
	--header-gradient-end: #EDEDED;
	--featured-bg: rgba(250, 250, 250, 0.7);
	--theme-toggle-bg: var(--color-accent);

	/* Boutons tags */
	--tag-bg: #FFDEC2;
	--tag-border: #FFBD84;
	--tag-text: #49280B;
	--tag-hover-bg: #FFCDA3;
	--tag-all-bg: #A4E3D1;
	--tag-all-border: #7FD8BE;
	--tag-all-text: #243E36;
	--tag-all-hover-bg: #7FD8BE;
	--tag-all-hover-border: #5B9A88;
	--tag-active-bg: #FFAC65;
	--tag-active-border: #FF8B28;
	--tag-active-text: #FFFFFF;
	--tag-all-active-bg: #7FD8BE;
	--tag-all-active-border: #5B9A88;
	--tag-all-active-text: #FFFFFF;

	/* Frame selectors - Thème Clair — palettes cadres + gris */
	--frame-white-selector-bg: #FFFFFF;
	--frame-white-selector-border: #D1D1D1;
	--frame-white-selector-text: #2E2E2E;
	--frame-white-selector-hover-bg: #F7F7F7;
	--frame-white-selector-hover-border: #B9B9B9;
	--frame-white-selector-active-bg: #EDEDED;
	--frame-white-selector-active-border: #A2A2A2;
	--frame-white-selector-active-text: #000000;

	--frame-silver-selector-bg: #DCE0E8;
	--frame-silver-selector-border: #B5B6C3;
	--frame-silver-selector-text: #464646;
	--frame-silver-selector-hover-bg: #C9CBD5;
	--frame-silver-selector-hover-border: #A1A2B0;
	--frame-silver-selector-active-bg: #B5B6C3;
	--frame-silver-selector-active-border: #8D8D9E;
	--frame-silver-selector-active-text: #2E2E2E;

	--frame-gold-selector-bg: #CCBB8B;
	--frame-gold-selector-border: #B9A475;
	--frame-gold-selector-text: #49280B;
	--frame-gold-selector-hover-bg: #C3AF80;
	--frame-gold-selector-hover-border: #B0986A;
	--frame-gold-selector-active-bg: #B9A475;
	--frame-gold-selector-active-border: #A68D5F;
	--frame-gold-selector-active-text: #241406;

	/* Espacements standards */
	--spacing-small: 16px;
	--spacing-medium: 32px;

	/* Propriétés génériques */
	--border-width-thick: 4px;
	--border-radius: 8px;
	--img-radius: 20px;
	--transition-speed: 0.25s;
}

/* Thème Sombre */
[data-theme="dark"] {
	/* Couleurs principales — palette orange sombre + turquoise sombre */
	--color-primary: #6DB9A3;
	--color-accent: #5B9A88;
	--color-orange: #DB7722;
	--color-orange-light: #6D3C11;
	--color-orange-dark: #924F17;
	--color-bg-light: #2E2E2E;
	--color-shadow: #000000;
	--color-text: #E8E8E8;
	--color-text-muted: #A2A2A2;
	--color-bg-gradient-start: #49280B;
	--color-bg-gradient-end: #241406;

	/* Cadres : mêmes couleurs qu'en mode clair (réalisme) */

	/* Composants spécifiques */
	--container-gradient-start: #49280B;
	--container-gradient-end: #241406;
	--container-border: #497B6D;
	--page-borders-gradient-end: #49280B;
	--page-borders-border: #365D51;
	--section-border-top: #924F17;
	--section-border-side: #243E36;
	--section-border-bottom: #6D3C11;
	--footer-gradient-start: #6D3C11;
	--footer-gradient-end: #49280B;
	--footer-border: #FF8B28;
	--menu-gradient-start: #49280B;
	--menu-gradient-end: #6D3C11;
	--menu-border: #924F17;
	--container-bg: rgba(73, 40, 11, 0.8);
	--page-borders-bg: rgba(36, 20, 6, 0.6);
	--header-gradient-start: #49280B;
	--header-gradient-end: #241406;
	--featured-bg: rgba(73, 40, 11, 0.7);
	--theme-toggle-bg: #49280B;

	/* Boutons tags */
	--tag-bg: #243E36;
	--tag-border: #365D51;
	--tag-text: #E8E8E8;
	--tag-hover-bg: #365D51;
	--tag-all-bg: #243E36;
	--tag-all-border: #365D51;
	--tag-all-text: #7FD8BE;
	--tag-all-hover-bg: #365D51;
	--tag-all-hover-border: #497B6D;
	--tag-active-bg: #924F17;
	--tag-active-border: #DB7722;
	--tag-active-text: #FFFFFF;
	--tag-all-active-bg: #365D51;
	--tag-all-active-border: #5B9A88;
	--tag-all-active-text: #FFFFFF;

	/* Frame selectors — palette grise, argent, or */
	--frame-white-selector-bg: #464646;
	--frame-white-selector-border: #5D5D5D;
	--frame-white-selector-text: #D1D1D1;
	--frame-white-selector-hover-bg: #5D5D5D;
	--frame-white-selector-hover-border: #747474;
	--frame-white-selector-active-bg: #747474;
	--frame-white-selector-active-border: #8B8B8B;
	--frame-white-selector-active-text: #FFFFFF;

	--frame-silver-selector-bg: #666379;
	--frame-silver-selector-border: #7A788B;
	--frame-silver-selector-text: #B5B6C3;
	--frame-silver-selector-hover-bg: #7A788B;
	--frame-silver-selector-hover-border: #8D8D9E;
	--frame-silver-selector-active-bg: #8D8D9E;
	--frame-silver-selector-active-border: #A1A2B0;
	--frame-silver-selector-active-text: #E8E8E8;

	--frame-gold-selector-bg: #8A6A3E;
	--frame-gold-selector-border: #937549;
	--frame-gold-selector-text: #B9A475;
	--frame-gold-selector-hover-bg: #937549;
	--frame-gold-selector-hover-border: #9D8154;
	--frame-gold-selector-active-bg: #9D8154;
	--frame-gold-selector-active-border: #A68D5F;
	--frame-gold-selector-active-text: #E8E8E8;
}