/**
 * PowerX Design System Tokens
 *
 * Unified design token architecture defining semantic color scales,
 * elevation shadows, border radii, and motion variables for the
 * PowerX Theme and Elementor Widgets.
 *
 * =========================================================================
 * TABLE OF CONTENTS
 * =========================================================================
 * 1.0 NEUTRAL COLOR PALETTE
 * 2.0 PRIMARY & ACCENT PALETTE
 * 3.0 SYSTEM STATUS TOKENS
 * 4.0 BORDER RADIUS SCALE
 * 5.0 ELEVATION & SHADOW SYSTEM
 * 6.0 TRANSITIONS & MOTION
 * =========================================================================
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

:root {
	/* =====================================================================
	 * 1.0 NEUTRAL COLOR PALETTE
	 * High-contrast, clean neutral shades optimized for light canvas.
	 * ===================================================================== */
	--powerx-neutral-0: #ffffff;
	--powerx-neutral-100: #f6f6f9;
	--powerx-neutral-150: #eaeaef;
	--powerx-neutral-200: #dcdce4;
	--powerx-neutral-300: #c0c0cf;
	--powerx-neutral-400: #a5a5ba;
	--powerx-neutral-500: #8e8ea9;
	--powerx-neutral-600: #666687;
	--powerx-neutral-700: #4a4a6a;
	--powerx-neutral-800: #32324d;
	--powerx-neutral-900: #212134;

	/* =====================================================================
	 * 2.0 PRIMARY & ACCENT PALETTE
	 * Vibrant, modern corporate primary shades with smooth hover states.
	 * ===================================================================== */
	--powerx-primary-50: #f0f0ff;
	--powerx-primary-100: #d9d8ff;
	--powerx-primary-200: #b8b6ff;
	--powerx-primary-500: #4945ff;
	--powerx-primary-600: #3b36e0;
	--powerx-primary-700: #271fe0;
	--powerx-primary-hover: var(--powerx-primary-600, #3b36e0);
	--powerx-primary-active: var(--powerx-primary-700, #271fe0);

	/* =====================================================================
	 * 3.0 SYSTEM STATUS TOKENS
	 * Semantic feedback colors for alerts, badges, and validation states.
	 * ===================================================================== */
	--powerx-success-50: #f0fdf4;
	--powerx-success-500: #16a34a;
	--powerx-success-700: #15803d;

	--powerx-warning-50: #fffbeb;
	--powerx-warning-500: #d97706;
	--powerx-warning-700: #b45309;

	--powerx-danger-50: #fef2f2;
	--powerx-danger-500: #dc2626;
	--powerx-danger-700: #b91c1c;

	/* =====================================================================
	 * 4.0 BORDER RADIUS SCALE
	 * Harmonious radius tokens applicable across components.
	 * ===================================================================== */
	--powerx-radius-none: 0;
	--powerx-radius-xs: 4px;
	--powerx-radius-sm: 4px;
	--powerx-radius-md: 4px;
	--powerx-radius-lg: 4px;
	--powerx-radius-xl: 4px;
	--powerx-radius-full: 9999px;

	/* =====================================================================
	 * 5.0 ELEVATION & SHADOW SYSTEM
	 * Subtle, soft drop shadows engineered for elegant card and menu depth.
	 * ===================================================================== */
	--powerx-shadow-xs: 0 1px 2px 0 rgba(33, 33, 52, 0.05);
	--powerx-shadow-sm: 0 1px 3px 0 rgba(33, 33, 52, 0.08), 0 1px 2px -1px rgba(33, 33, 52, 0.08);
	--powerx-shadow-md: 0 4px 6px -1px rgba(33, 33, 52, 0.08), 0 2px 4px -2px rgba(33, 33, 52, 0.05);
	--powerx-shadow-lg: 0 10px 15px -3px rgba(33, 33, 52, 0.08), 0 4px 6px -4px rgba(33, 33, 52, 0.05);
	--powerx-shadow-dropdown: 0 1px 4px 0 rgba(33, 33, 52, 0.10);

	/* =====================================================================
	 * 6.0 TRANSITIONS & MOTION
	 * Micro-interaction timing curves for smooth interactive states.
	 * ===================================================================== */
	--powerx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--powerx-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--powerx-transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}