/**
 * Word Count Tool - CSS Variables
 *
 * Tool-specific custom properties extending shared tool variables.
 * Uses teal theme to match the tool's gradient.
 *
 * @package AgenticWP
 */

.word-count-hero,
.word-count-interface-section,
.word-count-results {
	--feature-word-count-bg: #ccfbf1; /* Teal-100 tint for blobs */
	--word-count-accent: #14b8a6; /* Teal-500 */
	--word-count-accent-dark: #134e4a; /* Teal-900 */
	--word-count-accent-light: #5eead4; /* Teal-300 */

	/* Grade level colors (based on education level) */
	--grade-easy: var(--tool-success); /* Grades 1-6 */
	--grade-medium: var(--tool-warning); /* Grades 7-9 */
	--grade-hard: #f97316; /* Orange - Grades 10-12 */
	--grade-very-hard: var(--tool-error); /* Grades 13+ */

	/* Reading ease colors (inverted scale) */
	--ease-easy: var(--tool-success); /* 60-100 */
	--ease-medium: var(--tool-warning); /* 30-59 */
	--ease-hard: var(--tool-error); /* 0-29 */

	/* Goal progress colors */
	--goal-incomplete: var(--tool-border);
	--goal-in-progress: var(--word-count-accent);
	--goal-complete: var(--tool-success);
	--goal-exceeded: #3b82f6; /* Blue for exceeding goal */
}