/**
 * TTS Reader - Theme (couleurs, variables)
 * Couleurs et thème du lecteur
 */

:root {
	--tts-primary: #4CAF50;
	--tts-primary-dark: #45a049;
	--tts-primary-light: rgba(76, 175, 80, 0.15);
	--tts-bg-dark: #000000;
	--tts-bg-panel: rgba(20, 20, 20, 0.98);
	--tts-border-primary: rgba(76, 175, 80, 0.3);
	--tts-text-primary: #FFFFFF;
	--tts-text-secondary: #b0b0b0;
	--tts-text-muted: #999999;
	--tts-bg-progress: #E0E0E0;
	--tts-font-size-sm: 12px;
	--tts-font-size-base: 14px;
	--tts-font-size-lg: 16px;
	--tts-radius-sm: 4px;
	--tts-radius-md: 6px;
	--tts-radius-lg: 8px;
	--tts-transition: all 0.3s ease;
	--tts-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--tts-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--tts-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Thème clair */
.tts-widget.tts-theme-light {
	--tts-bg-dark: #FFFFFF;
	--tts-bg-panel: rgba(240, 240, 240, 0.95);
	--tts-text-primary: #333333;
	--tts-text-secondary: #666666;
	--tts-text-muted: #999999;
}

/* Thème haute contrast */
.tts-widget.tts-theme-contrast {
	--tts-primary: #FFFF00;
	--tts-primary-dark: #E6E600;
	--tts-bg-dark: #000000;
	--tts-text-primary: #FFFFFF;
}

/* Mode sombre du système */
@media (prefers-color-scheme: dark) {
	.tts-widget {
		--tts-bg-dark: #1a1a1a;
		--tts-bg-panel: rgba(30, 30, 30, 0.98);
	}
}

/* Mode clair du système */
@media (prefers-color-scheme: light) {
	.tts-widget {
		--tts-bg-dark: #FFFFFF;
		--tts-bg-panel: rgba(245, 245, 245, 0.95);
		--tts-text-primary: #333333;
	}
}