/*
==============================================
ANYTIME FITNESS THEME VARIABLES
==============================================

This file contains all the color variables and theme settings
for the Anytime Fitness branding transformation.

Primary Colors:
- Primary Purple: #6E38D5
- Primary Dark (hover/active): #5B2CB5  
- Primary Light (accents): #8A5CE6

Neutral Colors:
- Background: #FFFFFF
- Surface/Section Backgrounds: #F2F2F2 - #F7F7F7
- Text: #000000

==============================================
*/

:root {
  /* Primary Brand Colors */
  --af-primary: #6E38D5;
  --af-primary-dark: #5B2CB5;
  --af-primary-light: #8A5CE6;
  
  /* Neutral Colors */
  --af-white: #FFFFFF;
  --af-black: #000000;
  --af-surface-light: #F7F7F7;
  --af-surface-medium: #F2F2F2;
  --af-surface-dark: #E8E8E8;
  
  /* Text Colors */
  --af-text-primary: #000000;
  --af-text-secondary: #333333;
  --af-text-muted: #666666;
  --af-text-light: #999999;
  
  /* Status Colors */
  --af-success: #28A745;
  --af-warning: #FFC107;
  --af-danger: #DC3545;
  --af-info: #17A2B8;
  
  /* Gradients */
  --af-gradient-primary: linear-gradient(135deg, #6E38D5 0%, #8A5CE6 100%);
  --af-gradient-dark: linear-gradient(135deg, #5B2CB5 0%, #6E38D5 100%);
  --af-gradient-light: linear-gradient(135deg, #8A5CE6 0%, #A67DFF 100%);
  
  /* Shadows */
  --af-shadow-sm: 0 2px 4px rgba(110, 56, 213, 0.1);
  --af-shadow-md: 0 4px 8px rgba(110, 56, 213, 0.15);
  --af-shadow-lg: 0 8px 16px rgba(110, 56, 213, 0.2);
  --af-shadow-xl: 0 12px 24px rgba(110, 56, 213, 0.25);
  
  /* Transitions */
  --af-transition-fast: 0.2s ease;
  --af-transition-normal: 0.3s ease;
  --af-transition-slow: 0.5s ease;
  
  /* Border Radius */
  --af-radius-sm: 4px;
  --af-radius-md: 8px;
  --af-radius-lg: 12px;
  --af-radius-xl: 16px;
  --af-radius-full: 50px;
}

/* Utility Classes for Quick Color Application */
.text-af-primary { color: var(--af-primary) !important; }
.text-af-primary-dark { color: var(--af-primary-dark) !important; }
.text-af-primary-light { color: var(--af-primary-light) !important; }
.text-af-black { color: var(--af-black) !important; }
.text-af-white { color: var(--af-white) !important; }

.bg-af-primary { background-color: var(--af-primary) !important; }
.bg-af-primary-dark { background-color: var(--af-primary-dark) !important; }
.bg-af-primary-light { background-color: var(--af-primary-light) !important; }
.bg-af-white { background-color: var(--af-white) !important; }
.bg-af-surface-light { background-color: var(--af-surface-light) !important; }
.bg-af-surface-medium { background-color: var(--af-surface-medium) !important; }

.border-af-primary { border-color: var(--af-primary) !important; }
.border-af-primary-dark { border-color: var(--af-primary-dark) !important; }
.border-af-primary-light { border-color: var(--af-primary-light) !important; }

/* Button Base Styles */
.btn-af {
  background: var(--af-primary);
  color: var(--af-white);
  border: 2px solid var(--af-primary);
  border-radius: var(--af-radius-full);
  padding: 12px 30px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all var(--af-transition-normal);
  cursor: pointer;
}

.btn-af:hover {
  background: var(--af-primary-dark);
  border-color: var(--af-primary-dark);
  color: var(--af-white);
  transform: translateY(-2px);
  box-shadow: var(--af-shadow-md);
}

.btn-af-outline {
  background: transparent;
  color: var(--af-primary);
  border: 2px solid var(--af-primary);
}

.btn-af-outline:hover {
  background: var(--af-primary);
  color: var(--af-white);
}

/* Link Styles */
.link-af {
  color: var(--af-primary);
  text-decoration: none;
  transition: color var(--af-transition-fast);
}

.link-af:hover {
  color: var(--af-primary-dark);
  text-decoration: underline;
}

/* Section Backgrounds */
.section-af-light {
  background-color: var(--af-surface-light);
}

.section-af-medium {
  background-color: var(--af-surface-medium);
}

.section-af-white {
  background-color: var(--af-white);
}

/* Card Styles */
.card-af {
  background: var(--af-white);
  border-radius: var(--af-radius-lg);
  box-shadow: var(--af-shadow-sm);
  border: 1px solid var(--af-surface-medium);
  transition: all var(--af-transition-normal);
}

.card-af:hover {
  box-shadow: var(--af-shadow-md);
  transform: translateY(-4px);
}

/* Form Elements */
.input-af {
  border: 2px solid var(--af-surface-medium);
  border-radius: var(--af-radius-md);
  padding: 12px 16px;
  transition: border-color var(--af-transition-fast);
}

.input-af:focus {
  border-color: var(--af-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 56, 213, 0.1);
}

/* Overlay Styles */
.overlay-af {
  background: rgba(110, 56, 213, 0.8);
}

.overlay-af-light {
  background: rgba(110, 56, 213, 0.6);
}

/* Typography */
.heading-af {
  color: var(--af-text-primary);
  font-weight: 700;
}

.text-af-body {
  color: var(--af-text-secondary);
  line-height: 1.6;
}

.text-af-muted {
  color: var(--af-text-muted);
}