/** * _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 * @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 */ :root{--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);--wsscd-shadow-color-neutral:0, 0, 0;--wsscd-shadow-color-danger:214, 54, 56;--wsscd-shadow-color-success:0, 163, 42;--wsscd-shadow-color-warning:245, 158, 11;--wsscd-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--wsscd-font-family-mono:Consolas, Monaco, monospace;--wsscd-font-size-caption:11px;--wsscd-font-size-small:12px;--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-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-font-weight-normal:400;--wsscd-font-weight-medium:500;--wsscd-font-weight-semibold:600;--wsscd-font-weight-bold:700;--wsscd-line-height-tight:1.2;--wsscd-line-height-base:1.5;--wsscd-line-height-relaxed:1.7;--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;--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-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;--wsscd-container-sm:600px;--wsscd-container-xl:1400px;--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-large:44px;--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;--wsscd-wp-admin-menu-width:160px;--wsscd-wp-admin-menu-width-folded:36px;--wsscd-sidebar-width:360px;--wsscd-sidebar-width-tablet:300px;--wsscd-sidebar-width-small:200px;--wsscd-wp-admin-bar-height-desktop:32px;--wsscd-wp-admin-bar-height-mobile:46px;--wsscd-sidebar-sticky-top:var(--wsscd-wp-admin-bar-height-desktop);--wsscd-sidebar-margin-top:var(--wsscd-spacing-xl);--wsscd-sidebar-margin-bottom:var(--wsscd-spacing-xl);--wsscd-wizard-progress-height:140px;--wsscd-badge-number-width:44px;--wsscd-badge-number-width-mobile:36px;--wsscd-input-border-radius:var(--wsscd-radius-md);--wsscd-input-shadow:0 1px 2px rgba(0, 0, 0, 0.05);--wsscd-form-input-transition:border-color var(--wsscd-transition-base) ease, box-shadow var(--wsscd-transition-base) ease;--wsscd-form-field-width-small:200px;--wsscd-form-field-width-medium:400px;--wsscd-form-field-width-large:600px;--wsscd-form-field-gap:var(--wsscd-spacing-lg);--wsscd-form-field-label-gap:var(--wsscd-spacing-sm);--wsscd-form-field-horizontal-label-width:150px;--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;--wsscd-radius-xs:2px;--wsscd-radius-sm:4px;--wsscd-radius-custom:6px;--wsscd-radius-md:6px;--wsscd-radius-lg:8px;--wsscd-radius-xl:12px;--wsscd-radius-xxl:16px;--wsscd-radius-full:50%;--wsscd-radius-pill:100px;--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);--wsscd-shadow-inset-subtle:inset 0 1px 2px rgba(0, 0, 0, 0.04);--wsscd-shadow-danger:0 2px 8px rgba(214, 54, 56, 0.15);--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);--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);--wsscd-gradient-shimmer:linear-gradient( 100deg, var(--wsscd-skeleton-base) 0%, var(--wsscd-skeleton-base) 34%, var(--wsscd-skeleton-highlight) 50%, var(--wsscd-skeleton-base) 66%, var(--wsscd-skeleton-base) 100% );--wsscd-skeleton-size:300% 100%;--wsscd-skeleton-duration:1.8s;--wsscd-skeleton-easing:ease-in-out;--wsscd-transform-lift-subtle:translateY(-1px);--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-transform:transform var(--wsscd-transition-fast) ease;--wsscd-z-base:1;--wsscd-z-dropdown:100;--wsscd-z-sticky:200;--wsscd-z-overlay:100000;--wsscd-z-modal:999999;--wsscd-z-popover:1100;--wsscd-z-notification:9999;--wsscd-transition-fast:150ms;--wsscd-transition-base:200ms;--wsscd-transition-slow:300ms;--wsscd-transition-slower:400ms;--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)}body{--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);--wsscd-input-focus-shadow:var(--wsscd-ring-focus)}@media (prefers-contrast:high){:root{--wsscd-border-width:2px;--wsscd-border-width-focus:3px;--wsscd-color-text-disabled:#646970;--wsscd-color-bg-disabled:#dcdcde;--wsscd-color-border-disabled:#8c8f94;--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)}}@media (prefers-reduced-motion:reduce){:root{--wsscd-transition-fast:0ms;--wsscd-transition-base:0ms;--wsscd-transition-slow:0ms;--wsscd-transition-slower:0ms}}