/*
 * Perfecto — Shared CSS Variables
 * Single source of truth for all custom properties.
 * Loaded globally via perfecto-main dependency.
 *
 * @package Perfecto
 * @since 1.1.0
 */

:root {
 /* ── Brand colors (overridden by Theme Options via inline style) ── */
    --pf-primary:           #0a0a0a;
    --pf-primary-hover:     #333333;
    --pf-accent:            #E53935;
    --pf-accent-light:      #fef2f2;
    --pf-accent-dark:       #c62828;
    --pf-accent-rgb:        229, 57, 53;
    --pf-accent-border:     #fecaca;
    --pf-link:              #E53935;
    --pf-link-hover:        #c62828;

 /* ── Neutral palette ── */
    --pf-dark:              #0a0a0a;
    --pf-dark-hover:        #222222;
    --pf-dark-rgb:          10, 10, 10;
    --pf-white:             #ffffff;
    --pf-text:              #1a1a2e;
    --pf-muted:             #64748b;
    --pf-surface:           #fafafa;

 /* ── Gray scale ── */
    --pf-gray-50:           #f9fafb;
    --pf-gray-100:          #f3f4f6;
    --pf-gray-200:          #e5e7eb;
    --pf-gray-300:          #d1d5db;
    --pf-gray-400:          #9ca3af;
    --pf-gray-500:          #6b7280;
    --pf-gray-700:          #374151;
    --pf-gray-900:          #111827;

 /* ── Semantic colors ── */
    --pf-success:           #10b981;
    --pf-warning:           #f59e0b;
    --pf-danger:            #ef4444;
    --pf-blue:              #2563eb;
    --pf-green:             #059669;
    --pf-green-light:       #f0fdf4;
    --pf-star:              #f59e0b;
    --pf-star-rgb:          245, 158, 11;
    --pf-wishlist:          #ef4444;
    --pf-wishlist-light:    #fef2f2;
    --pf-wishlist-border:   #fecaca;

 /* ── Borders & surfaces ── */
    --pf-border:            #e8ecf0;
    --pf-border-color:      rgba(0, 0, 0, 0.06);
    --pf-bg-light:          #f9fafb;
    --pf-glass-bg:          rgba(255, 255, 255, 0.94);

 /* ── Shadows ── */
    --pf-shadow-sm:         0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --pf-shadow:            0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --pf-shadow-lg:         0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
    --pf-shadow-soft:       0 10px 40px -10px rgba(0,0,0,0.08);

 /* ── Border radii ── */
    --pf-radius-sm:         6px;
    --pf-radius:            10px;
    --pf-radius-md:         12px;
    --pf-radius-lg:         16px;
    --pf-radius-xl:         20px;

 /* ── Buttons ── */
    --pf-btn-radius:        12px;
    --pf-btn-atc-bg:        #0a0a0a;
    --pf-btn-atc-text:      #ffffff;
    --pf-btn-buy-bg:        #E53935;
    --pf-btn-buy-text:      #ffffff;
    --pf-btn-buy-bg-rgb:    229, 57, 53;

 /* ── Typography ── */
    --pf-font:              var(--font-body, var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif));

 /* ── Easing & transitions ── */
    --pf-transition:        0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --pf-transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --pf-anim-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --pf-anim-smooth:       cubic-bezier(0.25, 0.8, 0.25, 1);
    --pf-ease-slide:        cubic-bezier(0.22, 1, 0.36, 1);
    --pf-ease-modal:        cubic-bezier(0.4, 0, 0.2, 1);
    --pf-duration-slide:    0.38s;
    --pf-duration-overlay:  0.28s;
    --pf-active-color:      #000000;

 /* ── Sidebars ── */
    --pf-sidebar-width:          440px;
    --pf-sidebar-width-mobile:   92%;
    --pf-sidebar-radius-mobile:  20px;

 /* ── Popups ── */
    --pf-popup-radius:      16px;
    --pf-popup-shadow:      0 24px 64px rgba(0,0,0,0.22);
    --pf-popup-overlay:     rgba(0,0,0,0.58);
    --pf-popup-z:           99998;
    --pf-sold-z:            99997;
    --pf-popup-accent:      var(--pf-accent);
    --pf-popup-bg:          #ffffff;
    --pf-popup-speed:       0.32s;
    --pf-sold-radius:       14px;
    --pf-sold-bg:           #ffffff;
    --pf-sold-text-color:   #1e293b;
    --pf-sold-time-color:   #94a3b8;
    --pf-sold-btn-bg:       #E53935;
    --pf-sold-btn-color:    #ffffff;
    --pf-sold-btn-radius:   100px;
    --pf-sold-name-weight:  700;

 /* ── Variation swatches ── */
    --pf-sw-color:          36px;
    --pf-sw-img-w:          52px;
    --pf-sw-img-h:          64px;
    --pf-sw-btn:            36px;
    --pf-sw-gap:            8px;

 /* ── Convenience aliases ── */
    --pf-black:             var(--pf-dark);
    --pf-red:               var(--pf-wishlist);
    --pf-red-light:         var(--pf-wishlist-light);
    --pf-text-main:         var(--pf-gray-900);
    --pf-text-muted:        var(--pf-gray-500);
    --pf-accent-danger:     var(--pf-danger);
    --pf-accent-danger-bg:  var(--pf-wishlist-light);
}

/*
 * Shared utility @keyframes
 * Defined once here, usable in any component stylesheet.
 */

@keyframes pf-spin {
    to { transform: rotate(360deg); }
}

@keyframes pf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pf-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pf-slide-from-right {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pf-slide-from-left {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pf-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.05); opacity: 0.8; }
}

/*
 * ── Safety fallbacks for round ATC button ──
 * Ensures the cart icon button always has a visible color even if
 * --pf-atc-bg hasn't been injected by PHP yet (cache/preview edge cases).
 */
.pf-product-card .round-add-to-cart,
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn {
    background-color: var(--pf-atc-bg, #0a0a0a);
    color: var(--pf-atc-txt, #ffffff);
}

.pf-product-card .round-add-to-cart svg,
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn svg {
    stroke: var(--pf-atc-txt, #ffffff);
}