/**
 * Rankology Ajax Live Search - Global Colors
 * 
 * Centralized color variables for consistent theming across the plugin
 * Use these variables everywhere instead of hardcoding colors
 * 
 * @package RnkAjaxSearch
 * @since 1.0.0
 */

:root {
	/* ===========================
	   Primary Colors
	   =========================== */
	/* Design guide palette (see docs/development-guide.md) */
	/* Primary = brand purple */
	--rnk-primary: #8A2BE2;
	--rnk-primary-dark: #6A0DAD;
	--rnk-primary-light: #B266FF;
	
	/* Secondary = supporting indigo */
	--rnk-secondary: #4F46E5;
	--rnk-secondary-dark: #3730A3;
	--rnk-secondary-light: #818CF8;

	/* Accent colors (AI + live experience) */
	--rnk-accent-blue: var(--rnk-secondary);
	--rnk-accent-cyan: #06B6D4;

	/* Focus ring */
	--rnk-focus-ring: rgba(138, 43, 226, 0.25);

	/* ===========================
	   State Colors
	   =========================== */
	--rnk-success: #10b981;
	--rnk-success-dark: #059669;
	--rnk-success-light: #66BB6A;

	--rnk-danger: #ef4444;
	--rnk-danger-dark: #dc2626;
	--rnk-danger-light: #f87171;

	--rnk-warning: #f59e0b;
	--rnk-warning-dark: #d97706;
	--rnk-warning-light: #fbbf24;

	--rnk-info: var(--rnk-secondary);
	--rnk-info-dark: #2563eb;
	--rnk-info-light: #60a5fa;

	--rnk-surface: #ffffff;
	--rnk-radius-md: 6px;

	/* ===========================
	   Toggle Switch Colors
	   =========================== */
	/* Neutral OFF state (avoid alarming red by default) */
	--rnk-toggle-off-bg: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
	--rnk-toggle-off-bg-solid: #cbd5e1;
	--rnk-toggle-off-shadow: rgba(15, 23, 42, 0.12);

	/* ON state uses brand gradient */
	--rnk-toggle-on-bg: linear-gradient(135deg, var(--rnk-primary) 0%, var(--rnk-primary-dark) 100%);
	--rnk-toggle-on-bg-solid: var(--rnk-primary);
	--rnk-toggle-on-shadow: rgba(138, 43, 226, 0.28);
	--rnk-toggle-on-knob-bg: #ffffff;

	--rnk-toggle-knob-off-bg: #ffffff;
	--rnk-toggle-knob-on-bg: #10b981;
	--rnk-toggle-knob-shadow: rgba(0, 0, 0, 0.15);

	/* ===========================
	   Background Colors
	   =========================== */
	--rnk-bg: #f8fafc;
	--rnk-bg-white: #ffffff;
	--rnk-bg-light: #f1f5f9;
	--rnk-bg-lighter: #f8fafc;
	--rnk-bg-dark: #1e293b;

	/* ===========================
	   Border Colors
	   =========================== */
	--rnk-border: #e2e8f0;
	--rnk-border-light: #f1f5f9;
	--rnk-border-dark: #cbd5e1;

	/* ===========================
	   Text Colors
	   =========================== */
	--rnk-text: #1e293b;
	--rnk-text-light: #64748b;
	--rnk-text-lighter: #94a3b8;
	--rnk-text-white: #ffffff;

	/* ===========================
	   Gradient Colors
	   =========================== */
	--rnk-search-primary: var(--rnk-primary);
	--rnk-search-primary-dark: var(--rnk-primary-dark);
	--rnk-search-primary-light: var(--rnk-primary-light);
	--rnk-gradient-primary: linear-gradient(135deg, var(--rnk-primary-light) 0%, var(--rnk-primary-dark) 100%);
	--rnk-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
	--rnk-gradient-surface: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

	/* ===========================
	   Admin UI Accent Colors
	   =========================== */
	/* Keep semantic "purple" accents mapped to the primary palette */
	--rnk-accent-purple: var(--rnk-primary);
	--rnk-accent-purple-dark: var(--rnk-primary-dark);
	--rnk-accent-purple-light: rgba(138, 43, 226, 0.10);
	--rnk-accent-purple-light-hover: rgba(138, 43, 226, 0.15);
	--rnk-accent-purple-light-active: rgba(138, 43, 226, 0.12);
	--rnk-accent-purple-focus: rgba(138, 43, 226, 0.12);

	/* Shared alpha overlays for admin/front-end components */
	--rnk-alpha-white-6: rgba(255, 255, 255, 0.06);
	--rnk-alpha-white-10: rgba(255, 255, 255, 0.10);
	--rnk-alpha-white-14: rgba(255, 255, 255, 0.14);
	--rnk-alpha-white-18: rgba(255, 255, 255, 0.18);
	--rnk-alpha-white-22: rgba(255, 255, 255, 0.22);
	--rnk-alpha-white-30: rgba(255, 255, 255, 0.3);
	--rnk-alpha-white-45: rgba(255, 255, 255, 0.45);
	--rnk-alpha-white-70: rgba(255, 255, 255, 0.7);
	--rnk-alpha-white-88: rgba(255, 255, 255, 0.88);
	--rnk-alpha-white-90: rgba(255, 255, 255, 0.9);
	--rnk-alpha-white-98: rgba(255, 255, 255, 0.98);

	--rnk-alpha-black-8: rgba(0, 0, 0, 0.08);
	--rnk-alpha-black-10: rgba(0, 0, 0, 0.1);
	--rnk-alpha-black-12: rgba(0, 0, 0, 0.12);
	--rnk-alpha-black-18: rgba(0, 0, 0, 0.18);
	--rnk-alpha-black-20: rgba(0, 0, 0, 0.2);

	--rnk-alpha-slate-2: rgba(15, 23, 42, 0.02);
	--rnk-alpha-slate-6: rgba(15, 23, 42, 0.06);
	--rnk-alpha-slate-8: rgba(15, 23, 42, 0.08);
	--rnk-alpha-slate-10: rgba(15, 23, 42, 0.10);
	--rnk-alpha-night-22: rgba(15, 15, 26, 0.22);
	--rnk-alpha-lavender-text-82: rgba(234, 234, 240, 0.82);

	--rnk-alpha-primary-4: rgba(138, 43, 226, 0.04);
	--rnk-alpha-primary-5: rgba(138, 43, 226, 0.05);
	--rnk-alpha-primary-6: rgba(138, 43, 226, 0.06);
	--rnk-alpha-primary-8: rgba(138, 43, 226, 0.08);
	--rnk-alpha-primary-10: rgba(138, 43, 226, 0.10);
	--rnk-alpha-primary-12: rgba(138, 43, 226, 0.12);
	--rnk-alpha-primary-14: rgba(138, 43, 226, 0.14);
	--rnk-alpha-primary-18: rgba(138, 43, 226, 0.18);
	--rnk-alpha-primary-20: rgba(138, 43, 226, 0.20);
	--rnk-alpha-primary-22: rgba(138, 43, 226, 0.22);
	--rnk-alpha-primary-32: rgba(138, 43, 226, 0.32);
	--rnk-alpha-primary-35: rgba(138, 43, 226, 0.35);
	--rnk-alpha-primary-38: rgba(138, 43, 226, 0.38);

	--rnk-alpha-secondary-6: rgba(79, 70, 229, 0.06);
	--rnk-alpha-secondary-12: rgba(79, 70, 229, 0.12);
	--rnk-alpha-secondary-14: rgba(79, 70, 229, 0.14);
	--rnk-alpha-indigo-3: rgba(99, 102, 241, 0.03);

	--rnk-alpha-danger-6: rgba(239, 68, 68, 0.06);
	--rnk-alpha-danger-16: rgba(239, 68, 68, 0.16);
	--rnk-alpha-danger-18: rgba(239, 68, 68, 0.18);
	--rnk-alpha-danger-22: rgba(239, 68, 68, 0.22);

	--rnk-alpha-bg-lighter-98: rgba(248, 250, 252, 0.98);

	/* ===========================
	   Input Field Colors
	   =========================== */
	--rnk-input-border: #e2e8f0;
	--rnk-input-border-hover: #cbd5e1;
	--rnk-input-border-focus: var(--rnk-primary);
	--rnk-input-bg: #ffffff;
	--rnk-input-text: var(--rnk-text);
	--rnk-input-placeholder: #94a3b8;
	--rnk-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	--rnk-input-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06);
	--rnk-input-shadow-focus: 0 0 0 4px rgba(138, 43, 226, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);

	/* ===========================
	   Component Colors
	   =========================== */
	--rnk-radius: 6px;
	--rnk-radius-sm: 4px;
	--rnk-radius-lg: 10px;
	--rnk-radius-xl: 12px;

	/* Shadows */
	--rnk-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--rnk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--rnk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
	--rnk-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.15);
	--rnk-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.08);

	/* ===========================
	   Frontend Search Colors
	   =========================== */
	--rnk-search-primary: var(--rnk-primary);
	--rnk-search-primary-dark: var(--rnk-primary-dark);
	--rnk-search-primary-light: var(--rnk-primary-light);
	--rnk-search-primary-50: #F5EFFF;
	--rnk-search-gradient: linear-gradient(135deg, var(--rnk-search-primary) 0%, var(--rnk-search-primary-dark) 100%);

	--rnk-search-accent-blue: var(--rnk-secondary);
	--rnk-search-accent-cyan: #06B6D4;

	--rnk-search-bg: #ffffff;
	--rnk-search-surface: #ffffff;
	--rnk-search-border: #e5e7eb;
	--rnk-search-text: #111827;
	--rnk-search-text-secondary: #374151;
	--rnk-search-muted: #6b7280;

	--rnk-search-focus: rgba(138, 43, 226, 0.4);
	--rnk-search-hover: #f3f4f6;
	--rnk-search-active: var(--rnk-search-primary-dark);
	--rnk-search-highlight: #FFD166;

	/* ===========================
	   Toast Notification Colors
	   =========================== */
	--rnk-toast-bg: #ffffff;
	--rnk-toast-text: #2c3338;
	--rnk-toast-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);

	--rnk-toast-success: #10b981;
	--rnk-toast-success-light: #4CAF50;
	--rnk-toast-error: #d63638;
	--rnk-toast-error-light: #ff4136;
	--rnk-toast-warning: #dba617;
	--rnk-toast-warning-light: #ffc107;
	--rnk-toast-info: var(--rnk-secondary);
	--rnk-toast-info-light: var(--rnk-secondary-light);

	--rnk-toast-close: #787c82;
	--rnk-toast-close-hover: #f0f0f1;
	--rnk-toast-progress-bg: rgba(0, 0, 0, 0.08);

	/* WordPress Admin Colors */
	--rnk-wp-admin-blue: #2271b1;
	--rnk-wp-admin-green: #10b981;
	--rnk-wp-admin-red: #d63638;
	--rnk-wp-admin-yellow: #dba617;

	/* ===========================
	   Shortcode Box Colors
	   =========================== */
	--rnk-shortcode-bg: linear-gradient(135deg, rgba(138, 43, 226, 0.12) 0%, rgba(79, 70, 229, 0.10) 100%);
	--rnk-shortcode-border: rgba(138, 43, 226, 0.45);
	--rnk-shortcode-shadow: 0 10px 24px rgba(106, 13, 173, 0.14);
	--rnk-shortcode-decoration: linear-gradient(135deg, rgba(138, 43, 226, 0.14) 0%, transparent 100%);
	--rnk-shortcode-title: var(--rnk-primary-dark);
	--rnk-shortcode-title-icon: var(--rnk-secondary);
	--rnk-shortcode-description: rgba(106, 13, 173, 0.92);
	--rnk-shortcode-content-bg: #ffffff;
	--rnk-shortcode-content-border: rgba(79, 70, 229, 0.45);
	--rnk-shortcode-content-text: #1e293b;
	--rnk-shortcode-content-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);

	/* Copy Button Colors */
	--rnk-copy-btn-bg: linear-gradient(135deg, var(--rnk-primary) 0%, var(--rnk-primary-dark) 100%);
	--rnk-copy-btn-shadow: 0 10px 20px rgba(138, 43, 226, 0.22);
	--rnk-copy-btn-hover-shadow: 0 14px 28px rgba(138, 43, 226, 0.28);
	--rnk-copy-btn-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	--rnk-copy-btn-text: var(--rnk-text-white);
	--rnk-copy-btn-spinner-track: rgba(255, 255, 255, 0.35);
	--rnk-copy-btn-spinner-head: var(--rnk-text-white);

	/* Inline Copy Button */
	--rnk-inline-copy-bg: #ffffff;
	--rnk-inline-copy-hover: #f8fafc;

	/* Metabox Header Colors */
	--rnk-metabox-header-bg: var(--rnk-gradient-primary);
	--rnk-metabox-header-text: #ffffff;
	--rnk-metabox-header-decoration: rgba(255, 255, 255, 0.1);
	--rnk-metabox-header-decoration-light: rgba(255, 255, 255, 0.05);
	--rnk-metabox-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	--rnk-metabox-border: #e2e8f0;

	/* Badge Colors */
	--rnk-badge-success-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	--rnk-badge-success-text: #059669;
	--rnk-badge-warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	--rnk-badge-warning-text: #92400e;
	--rnk-badge-info-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	--rnk-badge-info-text: #1e40af;

	/* ===========================
	   Dark Mode Colors
	   =========================== */
	--rnk-dark-bg: #0F0F1A;
	--rnk-dark-surface: #1A1A2E;
	--rnk-dark-border: #2E2E4D;
	--rnk-dark-text: #EAEAF0;
	--rnk-dark-text-secondary: #A1A1B5;
	--rnk-dark-hover: #2A2A4A;

	--rnk-toast-dark-bg: #2c3338;
	--rnk-toast-dark-text: #c3c4c7;
	--rnk-toast-dark-close-hover: #3c4146;
	--rnk-toast-dark-close-color: #72aee6;
	--rnk-toast-dark-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}