/**
 * Price Comparison Pro - Global CSS Variables
 *
 * @package PriceComparisonPro
 * @since 1.0.0
 */

:root {
	/* ========================================
	   Spacing & Sizing
	   ======================================== */

	/* Spacing */
	--pcp-spacing-xs: 0.125rem;
	--pcp-spacing-s: 0.25rem;
	--pcp-spacing-m: 0.5rem;
	--pcp-spacing-l: 1rem;
	--pcp-spacing-xl: 1.5rem;
	--pcp-spacing-xxl: 2rem;

	/* Border Radius */
	--pcp-radius-s: 0.2rem;
	--pcp-radius-m: 0.4rem;
	--pcp-radius-l: 1.2rem;
	--pcp-radius-full: 100%;

	/* Component Dimensions */
	--pcp-toggle-width: 48px;
	--pcp-toggle-height: 24px;
	--pcp-toggle-slider-size: 18px;
	--pcp-toggle-slider-offset: 3px;
	--pcp-toggle-slider-travel: 24px;

	/* Loading Spinner */
	--pcp-spinner-size: 48px;
	--pcp-spinner-border-width: 4px;

	/* Image Stack */
	--pcp-stack-image-size: 72px;
	--pcp-stack-image-size-mobile: 48px;
	--pcp-stack-overlap: -20px;
	--pcp-stack-overlap-mobile: -12px;
	--pcp-stack-border-width: 3px;
	--pcp-stack-border-width-mobile: 2px;

	/* Recommendation */
	--pcp-recommendation-badge-size: 110px;
	--pcp-recommendation-badge-ribbon-width: 177px;

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

	/* Font size */
	--pcp-font-size-xxs: 0.6rem;
	--pcp-font-size-xs: 0.7rem;
	--pcp-font-size-s: 0.8rem;
	--pcp-font-size-m: 0.9rem;
	--pcp-font-size-base: 1rem;
	--pcp-font-size-l: 1.2rem;
	--pcp-font-size-xl: 1.4rem;

	/* Font Weights */
	--pcp-font-weight-light: 300;
	--pcp-font-weight-normal: 400;
	--pcp-font-weight-semibold: 600;

	/* Line Heights */
	--pcp-line-height-tight: 1;
	--pcp-line-height-s: 1.2;
	--pcp-line-height-normal: 1.5;
	--pcp-line-height-relaxed: 1.6;

	/* ========================================
	   Colors (Using Existing Theme Variables)
	   ======================================== */

	/* Primary Colors */
	--pcp-color-primary: #2ed131;
	--pcp-color-secondary: #ff7c38;
	--pcp-color-heading: #222222;
	--pcp-color-text: #353531;
	--pcp-color-faded: #6a6a6a;
	--pcp-color-gray: #9c9c9c;

	/* Primary Alternative Colors */
	--pcp-alt-color-heading: #ffffff;
	--pcp-alt-color-text: #ffffff;

	/* Background Colors - from theme */
	--pcp-color-bg: #ffffff;
	--pcp-color-bg-alt: #f5f5f5;
	--pcp-alt-color-bg: #000000;
	--pcp-alt-color-bg-alt: #222222;

	/* Border Colors - from theme */
	--pcp-color-border: #e9e9e9;

	/* State Colors */
	--pcp-color-success: #10b981;
	/* green for free delivery */
	--pcp-color-info: #ff7c38;
	--pcp-color-white: #ffffff;

	/* Overlay Colors */
	--pcp-color-overlay: rgba(255, 255, 255, 0.85);
	--pcp-color-tooltip-bg: #222222;
	--pcp-color-tooltip-text: #ffffff;
	--pcp-color-tooltip-dark-bg: rgba(0, 0, 0, 0.9);

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

	--pcp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
	--pcp-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25);
	--pcp-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.15);
	--pcp-shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.25);
	--pcp-shadow-2xl: 0 4px 12px rgba(0, 0, 0, 0.3);
	--pcp-shadow-badge: 0 2px 10px rgba(0, 0, 0, 0.4);

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

	--pcp-transition-fast: 0.2s ease;
	--pcp-transition-normal: 0.3s ease;
	--pcp-transition-slow: 0.4s ease;
	--pcp-transition-spin: 0.8s linear infinite;

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

	--pcp-z-badge: 2;
	--pcp-z-discount-badge: 10;
	--pcp-z-stack-hover: 100;
	--pcp-z-overlay: 1000;
	--pcp-z-tooltip: 1000;

	/* ========================================
	   Layout - Flex Values
	   ======================================== */

	/* Comparison Table Column Widths */
	--pcp-col-image: 0 0 7%;
	--pcp-col-name: 0 1 32%;
	--pcp-col-price: 0 0 18%;
	--pcp-col-payment: 0 0 8%;
	--pcp-col-delivery: 0 0 8%;
	--pcp-col-shop: 0 1 15%;
	--pcp-col-link: 0 1 12%;

	/* ========================================
	   Filters & Effects
	   ======================================== */

	--pcp-blur-overlay: blur(2px);

	/* ========================================
	   Badge Colors (Type/Spektrum)
	   ======================================== */

	/* Seed Type Colors - can be customized */
	--pcp-badge-autoflower-bg: #000000;
	--pcp-badge-feminisiert-bg: #000000;
	--pcp-badge-regulaer-bg: #000000;

	/* Oil Type Colors - can be customized */
	--pcp-badge-vollspektrum-bg: #000000;
	--pcp-badge-broad-spektrum-bg: #000000;
	--pcp-badge-isolat-bg: #000000;

	/* ========================================
	   Responsive Breakpoints (for reference)
	   ======================================== */

	/* These are for documentation, not used directly in CSS */
	/* Mobile: 479px and below */
	/* Tablet: 600px and below */
	/* Small Desktop: 767px and below */
	/* Desktop: 1140px and below */
}