/**
 * Keyword Density Checker - CSS Variables
 *
 * Tool-specific custom properties for the Keyword Density tool.
 * Extends shared tool variables with orange theme accent.
 *
 * @package AgenticWP
 */

/**
 * CSS Naming Convention (BEM with kd- prefix)
 * ============================================
 *
 * This tool uses BEM (Block Element Modifier) naming with a `kd-` namespace prefix
 * to prevent style conflicts and improve maintainability.
 *
 * Pattern: .kd-{block}__{element}--{modifier}
 *
 * Blocks (top-level components):
 *   .kd-gauge           - Density gauge component
 *   .kd-warning         - Warning/recommendation cards
 *   .kd-eeat            - E-E-A-T signals panel
 *   .kd-intent          - User intent panel
 *   .kd-heading         - Heading structure panel
 *   .kd-placement       - Placement map/checklist
 *   .kd-score           - Content score display
 *   .kd-preview         - Content preview with highlights
 *   .kd-input           - Input section
 *   .kd-results         - Results dashboard
 *
 * Elements (child components):
 *   .kd-gauge__track    - Gauge background circle
 *   .kd-gauge__progress - Gauge progress arc
 *   .kd-gauge__value    - Gauge center value display
 *   .kd-warning__icon   - Warning card icon
 *   .kd-warning__message - Warning message text
 *
 * Modifiers (states and variations):
 *   .kd-gauge--optimal  - Optimal density state
 *   .kd-gauge--danger   - Over-optimized state
 *   .kd-warning--error  - Error severity
 *   .kd-warning--success - Success/pass state
 *   .kd-zone--active    - Active zone indicator
 *   .kd-*--loading      - Loading state
 *   .kd-*--visible      - Visibility toggle
 *
 * Note: Some legacy class names remain for backward compatibility.
 * New components should follow this convention strictly.
 */

:root {
	/* ============================================
	   Keyword Density Tool Theme (Orange)
	   ============================================ */

	/* Primary accent color (matches tools-bento data-tool="keyword" gradient) */
	--kd-accent: #F97316;
	--kd-accent-light: #FDBA74;
	--kd-accent-dark: #EA580C;
	--kd-accent-bg: #FFF7ED;
	--kd-accent-border: #FED7AA;

	/* Gradient for primary accent elements */
	--kd-gradient: linear-gradient(135deg, #F97316 0%, #EA580C 100%);

	/* ============================================
	   Density Zone Colors
	   ============================================ */

	/* Under-optimized (< 0.5%) */
	--kd-zone-under: var(--tool-text-muted);
	--kd-zone-under-bg: var(--tool-bg-subtle);

	/* Optimal (0.5-2%) - Green */
	--kd-zone-optimal: #22C55E;
	--kd-zone-optimal-light: #16A34A;
	--kd-zone-optimal-bg: #DCFCE7;
	--kd-zone-optimal-gradient: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);

	/* Heavy (2-3%) - Yellow */
	--kd-zone-heavy: #EAB308;
	--kd-zone-heavy-light: #CA8A04;
	--kd-zone-heavy-bg: #FEF9C3;
	--kd-zone-heavy-gradient: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);

	/* Over-optimized (> 3%) - Red */
	--kd-zone-danger: #EF4444;
	--kd-zone-danger-light: #DC2626;
	--kd-zone-danger-bg: #FEE2E2;
	--kd-zone-danger-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

	/* ============================================
	   Content Score Colors
	   ============================================ */

	/* A grade (90+) */
	--kd-grade-a: #22C55E;
	--kd-grade-a-bg: #DCFCE7;

	/* B grade (80-89) */
	--kd-grade-b: #10B981;
	--kd-grade-b-bg: #D1FAE5;

	/* C grade (70-79) */
	--kd-grade-c: #EAB308;
	--kd-grade-c-bg: #FEF9C3;

	/* D grade (60-69) */
	--kd-grade-d: #F97316;
	--kd-grade-d-bg: #FFF7ED;

	/* F grade (< 60) */
	--kd-grade-f: #EF4444;
	--kd-grade-f-bg: #FEE2E2;

	/* ============================================
	   Gauge Sizing (references shared variables)
	   ============================================ */

	/* Use shared gauge variables from tools/shared/variables.css */
	/* --gauge-size-sm, --gauge-size-md, --gauge-size-lg */
	/* --gauge-stroke-sm, --gauge-stroke-md, --gauge-stroke-lg */

	/* SVG circle with r=54, circumference = 2 * PI * 54 = 339.292 */
	/* Also available as GAUGE_CIRCUMFERENCE in shared/constants.js */

	/* ============================================
	   Keyword Highlight
	   ============================================ */

	--kd-highlight-bg: #FDBA74;
	--kd-highlight-bg-hover: #F97316;
	--kd-highlight-text: var(--tool-text);
	--kd-highlight-current-bg: #F97316;
	--kd-highlight-current-text: #ffffff;

	/* ============================================
	   Placement Map
	   ============================================ */

	--kd-map-intro-color: #3B82F6;
	--kd-map-body-color: #6B7280;
	--kd-map-conclusion-color: #8B5CF6;

	/* ============================================
	   Component Spacing
	   ============================================ */

	--kd-card-padding: var(--tool-space-lg);
	--kd-card-gap: var(--tool-space-md);
	--kd-section-gap: var(--tool-space-xl);

	/* ============================================
	   Animation Timings
	   ============================================ */

	--kd-gauge-animation-duration: 0.8s;
	--kd-gauge-animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
	--kd-fade-duration: 0.3s;
}