/**
 * Shared Tool CSS Variables
 *
 * CSS custom properties for all SEO tools.
 * Extends base.css variables with tool-specific values.
 *
 * @package AgenticWP
 */

:root {
	/* ============================================
	   Tool Color Palette
	   ============================================ */

	/* Score status colors */
	--tool-success: #22c55e;
	--tool-success-bg: #dcfce7;
	--tool-success-border: #86efac;

	--tool-warning: #eab308;
	--tool-warning-bg: #fef9c3;
	--tool-warning-border: #fde047;

	--tool-error: #ef4444;
	--tool-error-bg: #fee2e2;
	--tool-error-border: #fca5a5;

	--tool-info: #3b82f6;
	--tool-info-bg: #dbeafe;
	--tool-info-border: #93c5fd;

	/* Neutral UI colors */
	--tool-bg: #ffffff;
	--tool-bg-subtle: #f9fafb;
	--tool-border: #e5e7eb;
	--tool-border-strong: #d1d5db;
	--tool-text: var(--ink, #0b1220);
	--tool-text-muted: var(--muted, #6b7280);

	/* ============================================
	   Tool Sizing
	   ============================================ */

	/* Border radius */
	--tool-radius-sm: 6px;
	--tool-radius-md: 10px;
	--tool-radius-lg: 16px;
	--tool-radius-xl: 20px;

	/* Spacing */
	--tool-space-xs: 0.25rem;
	--tool-space-sm: 0.5rem;
	--tool-space-md: 1rem;
	--tool-space-lg: 1.5rem;
	--tool-space-xl: 2rem;
	--tool-space-2xl: 3rem;

	/* ============================================
	   Component Sizing
	   ============================================ */

	/* Gauge sizes */
	--gauge-size-sm: 80px;
	--gauge-size-md: 120px;
	--gauge-size-lg: 160px;

	--gauge-stroke-sm: 6px;
	--gauge-stroke-md: 8px;
	--gauge-stroke-lg: 10px;

	/* Stat card sizes */
	--stat-height-sm: 60px;
	--stat-height-md: 80px;
	--stat-height-lg: 100px;

	/* ============================================
	   Typography
	   ============================================ */

	--tool-font-sm: 0.8125rem;   /* 13px */
	--tool-font-base: 0.9375rem; /* 15px */
	--tool-font-md: 1rem;        /* 16px */
	--tool-font-lg: 1.125rem;    /* 18px */
	--tool-font-xl: 1.5rem;      /* 24px */
	--tool-font-2xl: 2rem;       /* 32px */

	--tool-line-height: 1.5;
	--tool-line-height-tight: 1.25;

	/* ============================================
	   Transitions
	   ============================================ */

	--tool-transition-fast: 150ms ease;
	--tool-transition-base: 200ms ease;
	--tool-transition-slow: 300ms ease;

	/* ============================================
	   Shadows
	   ============================================ */

	--tool-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--tool-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--tool-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--tool-shadow-focus: 0 0 0 3px rgba(20, 184, 166, 0.3);

	/* ============================================
	   Z-Index Layers
	   ============================================ */

	--tool-z-base: 1;
	--tool-z-dropdown: 10;
	--tool-z-sticky: 20;
	--tool-z-overlay: 30;
	--tool-z-modal: 40;
	--tool-z-toast: 50;
}

/* Dark mode overrides (for future use) */
@media (prefers-color-scheme: dark) {
	:root {
		/* Can add dark mode variables here */
	}
}