/**
 * _Variables
 *
 * Global CSS Custom Properties (Variables)
 *
 * Defines all custom properties used throughout the plugin for consistent styling.
 * Respects WordPress admin color schemes for seamless integration.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_variables.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* Theme colors are now loaded separately or included inline */

:root {
    /* ==========================================================================
       Colors - WordPress 6.4+ Palette
       ========================================================================== */
    
    /* Color aliases - all base colors defined in _theme-colors.css */
    --wsscd-color-primary-darker: var(--wsscd-color-primary-dark);
    --wsscd-color-primary-lighter: var(--wsscd-color-secondary);
    --wsscd-color-black: #000;
    --wsscd-color-background: var(--wsscd-color-white);
    --wsscd-color-border-lighter: var(--wsscd-color-surface-dark);
    --wsscd-color-border-subtle: rgba(0, 0, 0, 0.06);

    /* ==========================================================================
       Shadow Color Tokens - RGB Values for rgba() Usage
       ========================================================================== */

    /* Semantic shadow colors (RGB format without alpha) */
    --wsscd-shadow-color-neutral: 0, 0, 0;
    --wsscd-shadow-color-primary: 34, 113, 177;
    --wsscd-shadow-color-planner: 59, 130, 246;
    --wsscd-shadow-color-danger: 214, 54, 56;
    --wsscd-shadow-color-error: 204, 29, 32;
    --wsscd-shadow-color-success: 0, 163, 42;
    --wsscd-shadow-color-warning: 245, 158, 11;
    --wsscd-shadow-color-accent: 56, 88, 233;
    --wsscd-shadow-color-pro-badge: 240, 184, 73;
    --wsscd-shadow-color-white: 255, 255, 255;

    /* Usage Example: box-shadow: 0 2px 4px rgba(var(--wsscd-shadow-color-primary), 0.25); */

    /* ==========================================================================
       Typography
       ========================================================================== */
    
    /* Font Family */
    --wsscd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --wsscd-font-family-mono: Consolas, Monaco, monospace;
    
    /* Font Sizes */
    --wsscd-font-size-small: 12px; /* WCAG AA compliant minimum */
    --wsscd-font-size-base: 13px;
    --wsscd-font-size-medium: 14px;
    --wsscd-font-size-medium-large: 15px;
    --wsscd-font-size-large: 16px;
    --wsscd-font-size-xl: 18px;
    --wsscd-font-size-xxl: 20px;
    --wsscd-font-size-xxxl: 24px;
    --wsscd-font-size-display-sm: 28px;
    --wsscd-font-size-display-md: 32px;
    --wsscd-font-size-display-lg: 40px;
    --wsscd-font-size-display-xl: 48px;
    --wsscd-font-size-display-xxl: 64px;

    /* Icon Sizes - SVG and Dashicons */
    --wsscd-icon-xs: 12px;
    --wsscd-icon-small: 16px;
    --wsscd-icon-medium: 20px;
    --wsscd-icon-large: 24px;
    --wsscd-icon-xl: 28px;
    --wsscd-icon-xxl: 32px;
    --wsscd-icon-hero: 40px;
    --wsscd-icon-display: 48px;
    --wsscd-icon-display-lg: 64px;
    --wsscd-icon-display-xl: 72px;

    /* Font Weights */
    --wsscd-font-weight-normal: 400;
    --wsscd-font-weight-medium: 500;
    --wsscd-font-weight-semibold: 600;
    --wsscd-font-weight-bold: 700;
    
    /* Line Heights */
    --wsscd-line-height-tight: 1.2;
    --wsscd-line-height-base: 1.5;
    --wsscd-line-height-relaxed: 1.7;
    
    /* ==========================================================================
       Spacing - 8px Grid System
       ========================================================================== */

    --wsscd-spacing-xxs: 2px;
    --wsscd-spacing-xs: 4px;
    --wsscd-spacing-sm: 8px;
    --wsscd-spacing-sm-large: 10px;
    --wsscd-spacing-md: 12px;
    --wsscd-spacing-base: 16px;
    --wsscd-spacing-lg: 20px;
    --wsscd-spacing-xl: 24px;
    --wsscd-spacing-xxl: 32px;
    --wsscd-spacing-xxxl: 40px;

    /* Gap Spacing - WordPress 20px Baseline */
    --wsscd-gap-tight: 8px;
    --wsscd-gap-sm-medium: 10px;
    --wsscd-gap-normal: 12px;
    --wsscd-gap-comfortable: 16px;
    --wsscd-gap-spacious: 20px;
    --wsscd-gap-large: 24px;
    --wsscd-gap-xl: 32px;

    /* Padding Presets - WordPress Core
     * All values are single (apply to all sides)
     * Compose them in usage for multi-directional padding
     * Example: padding: var(--wsscd-padding-small) var(--wsscd-padding-medium);
     */
    --wsscd-padding-small: 8px;
    --wsscd-padding-sm-large: 10px;
    --wsscd-padding-compact: 12px;
    --wsscd-padding-medium: 14px;
    --wsscd-padding-base: 16px;
    --wsscd-padding-large: 16px;
    --wsscd-padding-lg: 18px;
    --wsscd-padding-section: 20px;
    --wsscd-padding-spacious: 24px;
    --wsscd-padding-modal-header: 28px;
    
    /* ==========================================================================
       Layout
       ========================================================================== */
    
    /* Container Widths */
    --wsscd-container-sm: 600px;
    --wsscd-container-md: 800px;
    --wsscd-container-lg: 1200px;
    --wsscd-container-xl: 1400px;
    
	    /* Component Heights - WordPress Core */
	    --wsscd-input-height: 30px;
	    --wsscd-input-height-large: 50px;
	    --wsscd-button-height-small: 26px;
	    --wsscd-button-height: 30px;
	    --wsscd-button-height-large: 32px;
    --wsscd-button-icon-size: 36px;
    --wsscd-button-icon-size-small: 30px;
    --wsscd-button-icon-size-large: 44px;

    /* Navigation - WordPress Compact */
    --wsscd-nav-button-width: 100px;
    --wsscd-nav-button-width-complete: 180px; /* Fits both "Create Campaign" and "Update Campaign" without jump */
    --wsscd-wizard-nav-button-width: 96px;
    --wsscd-wizard-nav-button-width-complete: 172px;
    --wsscd-nav-height: 60px;
    --wsscd-nav-height-mobile: 56px;
    --wsscd-nav-container-height-mobile: 30px;
    --wsscd-nav-progress-height: 0;
    --wsscd-nav-shadow-gradient-height: 0;

    /* WordPress Admin Menu Widths */
    --wsscd-wp-admin-menu-width: 160px;
    --wsscd-wp-admin-menu-width-folded: 36px;

    /* Sidebar Widths */
    --wsscd-sidebar-width: 360px;
    --wsscd-sidebar-width-tablet: 300px;
    --wsscd-sidebar-width-small: 200px;

    /* WordPress Admin Bar Heights */
    --wsscd-wp-admin-bar-height-desktop: 32px;
    --wsscd-wp-admin-bar-height-mobile: 46px;

    /* Sidebar Sticky Positioning */
    --wsscd-sidebar-sticky-top: var(--wsscd-wp-admin-bar-height-desktop);
    /* Must equal the progress header's `margin-bottom` (spacing-xl) so the
       sidebar's sticky anchor coincides with its natural flow position.
       Any smaller and the sidebar sits LOWER at scroll=0 than where sticky
       would pin it, which causes the sidebar's bottom to extend past the
       wizard-navigation at page top. */
    --wsscd-sidebar-margin-top: var(--wsscd-spacing-xl);
    --wsscd-sidebar-margin-bottom: var(--wsscd-spacing-xl);
    /* Height of the sticky .wsscd-wizard-progress header — measured at
       runtime by JS (see wizard-lifecycle.js). Default matches a typical
       render (breadcrumb/title row + step row + progress strip ≈ 140px)
       so the fixed sidebar sits safely below the header on first paint;
       JS updates this to the exact value once the DOM is ready. */
    --wsscd-wizard-progress-height: 140px;

    /* Badge & Special Component Sizes */
    --wsscd-checkbox-size: 16px;
    --wsscd-badge-number-width: 44px;
    --wsscd-badge-number-width-mobile: 36px;
    --wsscd-priority-badge-min-width: 28px;

    /* List Styling */
    --wsscd-list-bullet-offset: -12px;

    /* Input Styling - WordPress Core */
    --wsscd-input-max-width: 25em;
    --wsscd-input-border-radius: var(--wsscd-radius-md);
    --wsscd-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wsscd-input-focus-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle drop shadow only - no ring to avoid double-border effect */

    /* Form Transitions */
    --wsscd-form-input-transition: border-color var(--wsscd-transition-base) ease, box-shadow var(--wsscd-transition-base) ease;

    /* Form Field Sizes */
    --wsscd-form-field-width-small: 200px;
    --wsscd-form-field-width-medium: 400px;
    --wsscd-form-field-width-large: 600px;
    --wsscd-form-field-width-full: 100%;

    /* Form Field Spacing */
    --wsscd-form-field-gap: var(--wsscd-spacing-lg);
    --wsscd-form-field-label-gap: var(--wsscd-spacing-sm);
    --wsscd-form-field-horizontal-label-width: 150px;

    /* ==========================================================================
       Borders & Radius
       ========================================================================== */

    /* Border Width */
    --wsscd-border-width: 1px;
    --wsscd-border-width-thick: 2px;
    --wsscd-border-width-focus: 2px;
    --wsscd-border-width-accent: 4px;
    --wsscd-border-width-accent-thin: 3px;

    /* Border Radius */
    --wsscd-radius-xs: 2px;
    --wsscd-radius-sm: 4px;
    --wsscd-radius-custom: 6px;  /* Buttons - Modern, softer appearance */
    --wsscd-radius-md: 6px;
    --wsscd-radius-lg: 8px;
    --wsscd-radius-xl: 12px;
    --wsscd-radius-xxl: 16px;
    --wsscd-radius-full: 50%;
    --wsscd-radius-pill: 100px;

    /* ==========================================================================
       Shadows - Material Design Inspired (Professional & Refined)
       ========================================================================== */

    /* Box Shadows - Optimized for visibility and depth perception */
    --wsscd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
    --wsscd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    --wsscd-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --wsscd-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10);
    --wsscd-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    /* NOTE: --wsscd-shadow-glow lives in the `body` block at end of file
       because it depends on --wp-admin-theme-color-alpha-25, a scheme-
       derived token only resolved correctly at body level. See the
       admin-color-scheme architecture comment in shared/_theme-colors.css. */
    --wsscd-shadow-inset-subtle: inset 0 1px 2px rgba(0, 0, 0, 0.04);

    /* NOTE: --wsscd-text-shadow-glow-primary, --wsscd-shadow-primary, and
       --wsscd-ring-focus also live in the `body` block (same reason). */

    /* Semantic Colored Shadows - For colored buttons and alerts */
    --wsscd-shadow-success: 0 2px 8px rgba(0, 163, 42, 0.15);
    --wsscd-shadow-danger: 0 2px 8px rgba(214, 54, 56, 0.15);
    --wsscd-shadow-warning: 0 2px 8px rgba(219, 166, 23, 0.20);

    /* Focus & Selection Rings — semantic only (primary ring lives in body) */
    --wsscd-ring-success: 0 0 0 2px rgba(0, 163, 42, 0.25);
    --wsscd-ring-danger: 0 0 0 2px rgba(214, 54, 56, 0.25);
    --wsscd-ring-warning: 0 0 0 2px rgba(219, 166, 23, 0.25);

    /* Shadow Alpha Values (for tooltips and components needing alpha control) */
    --wsscd-shadow-sm-alpha: rgba(0, 0, 0, 0.06);
    --wsscd-shadow-md-alpha: rgba(0, 0, 0, 0.12);
    --wsscd-shadow-lg-alpha: rgba(0, 0, 0, 0.15);

    /* ==========================================================================
       Gradients - Subtle depth and visual interest
       ========================================================================== */

    /* Background Gradients */
    --wsscd-gradient-primary: linear-gradient(135deg, var(--wsscd-color-primary) 0%, var(--wsscd-color-primary-dark) 100%);
    --wsscd-gradient-success: linear-gradient(135deg, var(--wsscd-color-success) 0%, var(--wsscd-color-success-dark) 100%);
    --wsscd-gradient-danger: linear-gradient(135deg, var(--wsscd-color-danger) 0%, var(--wsscd-color-danger-dark) 100%);
    --wsscd-gradient-warning: linear-gradient(135deg, var(--wsscd-color-warning) 0%, var(--wsscd-color-warning-dark) 100%);
    --wsscd-gradient-surface: linear-gradient(to bottom, var(--wsscd-color-white) 0%, var(--wsscd-color-surface) 100%);

    /* Shimmer Gradient (for loading states) - premium diagonal sweep with sharper highlight */
    --wsscd-gradient-shimmer: linear-gradient(
        100deg,
        var(--wsscd-skeleton-base) 0%,
        var(--wsscd-skeleton-base) 40%,
        var(--wsscd-skeleton-highlight) 50%,
        var(--wsscd-skeleton-base) 60%,
        var(--wsscd-skeleton-base) 100%
    );
    --wsscd-skeleton-size: 300% 100%;
    --wsscd-skeleton-duration: 1.6s;
    --wsscd-skeleton-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ==========================================================================
       Micro-interactions - Transforms & Transitions
       ========================================================================== */

    /* Transform values */
    --wsscd-transform-lift: translateY(-2px);
    --wsscd-transform-lift-subtle: translateY(-1px);
    --wsscd-transform-scale-up: scale(1.02);
    --wsscd-transform-scale-down: scale(0.98);

    /* Transition presets */
    --wsscd-transition-all: all var(--wsscd-transition-base) ease;
    --wsscd-transition-colors: background-color var(--wsscd-transition-fast) ease,
                             border-color var(--wsscd-transition-fast) ease,
                             color var(--wsscd-transition-fast) ease;
    --wsscd-transition-shadow: box-shadow var(--wsscd-transition-base) ease;
    --wsscd-transition-transform: transform var(--wsscd-transition-fast) ease;

    /* ==========================================================================
       Z-Index Scale
       ========================================================================== */

    --wsscd-z-base: 1;
    --wsscd-z-dropdown: 100;
    --wsscd-z-sticky: 200;
    --wsscd-z-overlay: 100000;        /* Modal/dialog overlays (above WP admin bar) */
    --wsscd-z-modal: 999999;          /* Modal dialogs (above WP admin bar at 99999) */
    --wsscd-z-popover: 1100;
    --wsscd-z-tooltip: 1200;
    --wsscd-z-notification: 9999;     /* Below WP admin bar, above content */
    
    /* ==========================================================================
       Animation & Transitions
       ========================================================================== */

    /* Durations */
    --wsscd-transition-fast: 150ms;
    --wsscd-transition-base: 200ms;
    --wsscd-transition-slow: 300ms;
    --wsscd-transition-slower: 400ms;
    
    /* Easing */
    --wsscd-ease-in: ease-in;
    --wsscd-ease-out: ease-out;
    --wsscd-ease-in-out: ease-in-out;
    --wsscd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ==========================================================================
       Dashboard (semantic aliases for admin dashboard only)
       ========================================================================== */
    --wsscd-dashboard-accent: var(--wsscd-color-primary);
    --wsscd-dashboard-accent-soft: var(--wsscd-color-primary-alpha-10);
    --wsscd-dashboard-accent-warm: var(--wsscd-color-warning-dark);
    --wsscd-dashboard-accent-warm-soft: var(--wsscd-color-warning-alpha-15);
    --wsscd-dashboard-metric-shadow: var(--wsscd-shadow-sm);
    --wsscd-dashboard-metric-hover-shadow: var(--wsscd-shadow-md);
    --wsscd-dashboard-card-strip-height: 3px;
    --wsscd-dashboard-hero-decor-width: 360px;
    --wsscd-dashboard-hero-decor-height: 240px;
    --wsscd-dashboard-hero-decor-top: -48px;
    --wsscd-dashboard-min-card-width: 280px;
    --wsscd-dashboard-suggestion-min-width: 350px;

    /* ==========================================================================
       Breakpoints (for reference in JS)
       ========================================================================== */

    --wsscd-breakpoint-xs: 480px;
    --wsscd-breakpoint-sm: 600px;
    --wsscd-breakpoint-md: 782px; /* WordPress admin breakpoint */
    --wsscd-breakpoint-lg: 960px;
    --wsscd-breakpoint-xl: 1200px;
    --wsscd-breakpoint-xxl: 1400px;
}

/* Scheme-derived shadows & rings — body-level so the alpha tints resolve
   against the per-scheme primary color. */
body {
    --wsscd-shadow-glow:              0 0 12px var(--wsscd-color-primary-alpha-25);
    --wsscd-text-shadow-glow-primary: 0 0  8px var(--wsscd-color-primary-alpha-25);
    --wsscd-shadow-primary:           0 2px 8px var(--wsscd-color-primary-alpha-20);
    --wsscd-ring-focus:               0 0 0 2px var(--wsscd-color-primary-alpha-25);
}

/* ==========================================================================
   Automatic Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-wsscd-theme="light"]) {
        /* Automatically apply dark theme if user prefers dark mode */
        /* Dark mode colors are defined in _theme-colors.css */
        /* Users can override by setting data-wsscd-theme="light" on :root */
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        /* Increased border widths for visibility */
        --wsscd-border-width: 2px;
        --wsscd-border-width-focus: 3px;

        /* Higher contrast disabled states */
        --wsscd-color-text-disabled: #646970;
        --wsscd-color-bg-disabled: #dcdcde;
        --wsscd-color-border-disabled: #8c8f94;

        /* Stronger shadows for depth perception */
        --wsscd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
        --wsscd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    body {
        --wsscd-ring-focus: 0 0 0 3px var(--wsscd-color-primary-alpha-25);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Instant transitions for users who prefer reduced motion */
        --wsscd-transition-fast: 0ms;
        --wsscd-transition-base: 0ms;
        --wsscd-transition-slow: 0ms;
        --wsscd-transition-slower: 0ms;
    }
}