/*
Theme Name: Serve Sphere Theme Storefront Child
Theme URI: https://servesphere.io/
Description: Serve Sphere Custom Child theme for WooCommerce Storefront
Author: Howard
Author URI: https://servesphere.io/
Template: storefront
Version: 1.2.6
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: storefront-child
*/

:root {
  --color-primary: #0A6EDB;
  --color-primary-dark: #084C9E;
  --color-accent: #FFA21A;

  --color-bg-light: #F5F7FA;
  --color-border: #E5E7EB;

  --color-text-dark: #2E2E2E;
  --color-text-light: #FFFFFF;
}


body {
    margin: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--color-text-light);
}

.filter-content-toggle span {
    transition: transform 0.2s;
}
.filter-content-toggle.active span {
    transform: rotate(180deg);
}

@keyframes float {
  0% { transform: translate(0,0) scale(1); }
  25% { transform: translate(20px, 10px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(10px, -10px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes float-slow {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px, 15px) scale(1.05); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes float-fast {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px, -20px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes float-diagonal {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,40px) scale(1.05); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes float-slow-reverse {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-30px,-10px) scale(0.95); }
  100% { transform: translate(0,0) scale(1); }
}

/* Tailwind utility classes for animation */
.animate-float { animation: float 12s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 18s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 8s ease-in-out infinite; }
.animate-float-diagonal { animation: float-diagonal 15s ease-in-out infinite; }
.animate-float-slow-reverse { animation: float-slow-reverse 20s ease-in-out infinite; }