/* Theme colors for PowerFit Gym Template - PREMIUM EDITION */

:root {
  /* Default theme (power) */
  --color-primary: #0088CC;
  --color-primary-dark: #006699;
  --color-primary-light: #33AADD;
  --color-secondary: #1E293B;
  --color-dark: #0F172A;
  --color-light: #F8FAFC;
  --color-light-gray: #F1F5F9;
  
  /* Text colors */
  --color-text: #334155;
  --color-text-light: #64748B;
  --color-text-dark: #1E293B;
  
  /* Background colors */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-bg-dark: #0F172A;
  
  /* Border colors */
  --color-border: #E2E8F0;
  
  /* Additional UI colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-overlay: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.75) 100%);
  --gradient-dark: linear-gradient(to bottom, rgba(15, 23, 42, 1) 0%, rgba(30, 41, 59, 1) 100%);
}

/* Alternative themes */
[data-theme="energy"] {
  --color-primary: #FFB302;
  --color-primary-dark: #E0A000;
  --color-primary-light: #FFD166;
  --color-secondary: #2D3748;
  --color-dark: #1A202C;
  --color-light: #F7FAFC;
  --color-light-gray: #EDF2F7;
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

[data-theme="steel"] {
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-primary-light: #60A5FA;
  --color-secondary: #1E293B;
  --color-dark: #0F172A;
  --color-light: #F8FAFC;
  --color-light-gray: #F1F5F9;
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* Background patterns - using premium quality images */
.bg-hero-pattern {
  background-image: linear-gradient(to right, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75)), 
                    url('https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.bg-stats-pattern {
  background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), 
                    url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80');
  background-size: cover;
  background-position: center;
}

/* Premium Button styles */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
  text-align: center;  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px -10px rgba(0, 136, 204, 0.5);
  border: none;
  z-index: 1;
}

.btn-primary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--color-primary-dark);
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  z-index: -1;
}

.btn-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 136, 204, 0.4);
}

.btn-primary:hover:before {
  width: 100%;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-outline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--color-primary);
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  z-index: -1;
}

.btn-outline:hover {
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 136, 204, 0.3);
}

.btn-outline:hover:before {
  width: 100%;
}