/* CSS Variables for ARCX FITNESS Color Scheme */
:root {
    /* Dark Theme Colors */
    --dark-bg: #0a0a0a;
    --dark-bg-secondary: rgba(0, 0, 0, 0.8);
    --dark-bg-tertiary: rgba(0, 0, 0, 0.6);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #999999;
    --text-accent: #667eea;
    
    /* Primary Gradient */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    
    /* Status Colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.3);
    
    /* Background Overlays */
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-medium: rgba(255, 255, 255, 0.1);
    --overlay-strong: rgba(255, 255, 255, 0.15);
    
    /* Email Category Colors */
    --email-inquiry: #00ffcc;
    --email-payment: #ff6b35;
    --email-support: #ff0080;
    --email-client: #667eea;
    
    /* Shadow Effects */
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 15px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Light Theme Override (Optional) */
[data-theme="light"] {
    --dark-bg: #ffffff;
    --dark-bg-secondary: rgba(255, 255, 255, 0.8);
    --dark-bg-tertiary: rgba(255, 255, 255, 0.6);
    
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    
    --border-light: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.2);
    --border-strong: rgba(0, 0, 0, 0.3);
    
    --overlay-light: rgba(0, 0, 0, 0.05);
    --overlay-medium: rgba(0, 0, 0, 0.1);
    --overlay-strong: rgba(0, 0, 0, 0.15);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: var(--dark-bg);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}