/* ========================================
   PREMIUM DARK CYBERPUNK REDESIGN
   Main Styles - Variant A
   ======================================== */

/* ========================================
   GLOBAL OVERRIDES - PREMIUM BACKGROUND
   ======================================== */

/* Override body background */
body {
  background: var(--premium-bg-dark, #0A0A0F) !important;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.08) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* Override container background */
.container {
  background: transparent !important;
}

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
  /* Background Colors */
  --premium-bg-dark: #0A0A0F;
  --premium-bg-card: #1A1A24;
  --premium-bg-card-hover: #24243A;
  
  /* Text Colors */
  --premium-text-primary: #FFFFFF;
  --premium-text-secondary: #A0A0B0;
  --premium-text-tertiary: #606070;
  
  /* Neon Accents (dosed!) */
  --premium-neon-orange: #FF6B35;
  --premium-neon-blue: #667EEA;
  --premium-neon-purple: #9333EA;
  
  /* Muscle Group Colors */
  --premium-accent-chest: #FF6B35;
  --premium-accent-back: #667EEA;
  --premium-accent-legs: #10B981;
  --premium-accent-shoulders: #F59E0B;
  --premium-accent-arms: #8B5CF6;
  --premium-accent-core: #EC4899;
  --premium-accent-cardio: #06B6D4;
  
  /* Typography */
  --premium-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --premium-text-xs: 0.75rem;    /* 12px */
  --premium-text-sm: 0.875rem;   /* 14px */
  --premium-text-base: 1rem;     /* 16px */
  --premium-text-lg: 1.125rem;   /* 18px */
  --premium-text-xl: 1.25rem;    /* 20px */
  --premium-text-2xl: 1.5rem;    /* 24px */
  --premium-text-3xl: 1.875rem;  /* 30px */
  --premium-text-4xl: 2.25rem;   /* 36px */
  
  /* Font Weights */
  --premium-font-normal: 400;
  --premium-font-medium: 500;
  --premium-font-semibold: 600;
  --premium-font-bold: 700;
  --premium-font-black: 900;
  
  /* Spacing (8px system) */
  --premium-space-1: 0.5rem;   /* 8px */
  --premium-space-2: 1rem;     /* 16px */
  --premium-space-3: 1.5rem;   /* 24px */
  --premium-space-4: 2rem;     /* 32px */
  --premium-space-5: 2.5rem;   /* 40px */
  --premium-space-6: 3rem;     /* 48px */
  --premium-space-8: 4rem;     /* 64px */
  
  /* Border Radius */
  --premium-radius-sm: 8px;
  --premium-radius-md: 12px;
  --premium-radius-lg: 16px;
  --premium-radius-xl: 24px;
  --premium-radius-full: 9999px;
  
  /* Shadows */
  --premium-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --premium-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --premium-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --premium-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
  --premium-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
  --premium-shadow-glow-orange: 0 0 20px rgba(255, 107, 53, 0.3);
  --premium-shadow-glow-blue: 0 0 20px rgba(102, 126, 234, 0.3);
  
  /* Transitions */
  --premium-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --premium-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --premium-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   EXERCISE CARDS - PREMIUM REDESIGN
   ======================================== */

.exercise-card {
  background: var(--premium-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--premium-radius-lg) !important;
  padding: var(--premium-space-3) !important;
  position: relative;
  transition: var(--premium-transition) !important;
  overflow: hidden;
  box-shadow: var(--premium-shadow-md) !important;
}

/* Accent bar on left (hidden by default, shows on hover) */
.exercise-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--premium-neon-orange);
  border-radius: var(--premium-radius-lg) 0 0 var(--premium-radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Dynamic accent color based on muscle group */
.exercise-card[data-muscle="chest"]::before { background: var(--premium-accent-chest); }
.exercise-card[data-muscle="back"]::before { background: var(--premium-accent-back); }
.exercise-card[data-muscle="legs"]::before { background: var(--premium-accent-legs); }
.exercise-card[data-muscle="shoulders"]::before { background: var(--premium-accent-shoulders); }
.exercise-card[data-muscle="arms"]::before { background: var(--premium-accent-arms); }
.exercise-card[data-muscle="core"]::before { background: var(--premium-accent-core); }
.exercise-card[data-muscle="cardio"]::before { background: var(--premium-accent-cardio); }

/* Hover state - PREVENT REVERTING TO OLD STYLE */
.exercise-card:hover {
  background: var(--premium-bg-card-hover) !important;
  border-color: rgba(255, 107, 53, 0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 107, 53, 0.2) !important;
}

.exercise-card:hover::before {
  opacity: 1 !important;
}

/* Force override any conflicting hover styles */
.exercise-card:hover::after {
  display: none !important;
}

/* Exercise header */
.exercise-header {
  display: flex;
  align-items: center;
  gap: var(--premium-space-2);
  margin-bottom: var(--premium-space-3);
}

/* Exercise number badge */
.exercise-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: var(--premium-radius-md);
  font-size: var(--premium-text-sm);
  font-weight: var(--premium-font-bold);
  color: var(--premium-neon-orange);
  flex-shrink: 0;
}

/* Exercise name - BIGGER, BOLDER */
.exercise-name,
.exercise-card h3 {
  font-size: var(--premium-text-2xl) !important;
  font-weight: var(--premium-font-bold) !important;
  color: var(--premium-text-primary) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

/* Exercise meta info */
.exercise-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--premium-space-2);
  margin-top: var(--premium-space-2);
  margin-bottom: var(--premium-space-3);
}

/* Stats grid (Sets, Reps, Rest) */
.exercise-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--premium-space-2);
  margin: var(--premium-space-3) 0;
  padding: var(--premium-space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--premium-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: var(--premium-text-xs);
  font-weight: var(--premium-font-semibold);
  color: var(--premium-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--premium-space-1);
}

.stat-value {
  display: block;
  font-size: var(--premium-text-2xl);
  font-weight: var(--premium-font-black);
  color: var(--premium-neon-orange);
  line-height: 1;
}

/* Exercise description/notes */
.exercise-description,
.exercise-notes {
  font-size: var(--premium-text-sm);
  color: var(--premium-text-secondary);
  line-height: 1.6;
  margin: var(--premium-space-2) 0;
}

/* ========================================
   TYPOGRAPHY IMPROVEMENTS
   ======================================== */

/* Section headings */
.section-title,
h2.card h2 {
  font-size: var(--premium-text-3xl) !important;
  font-weight: var(--premium-font-black) !important;
  color: var(--premium-text-primary) !important;
  margin-bottom: var(--premium-space-4) !important;
  letter-spacing: -0.02em !important;
}

/* Subsection headings */
h3 {
  font-size: var(--premium-text-xl) !important;
  font-weight: var(--premium-font-bold) !important;
  color: var(--premium-text-primary) !important;
  margin-bottom: var(--premium-space-2) !important;
}

/* Body text */
p {
  font-size: var(--premium-text-base);
  color: var(--premium-text-secondary);
  line-height: 1.6;
}

/* Small text */
small,
.text-small {
  font-size: var(--premium-text-sm);
  color: var(--premium-text-tertiary);
}

/* ========================================
   SPACING IMPROVEMENTS
   ======================================== */

/* Card spacing */
.card {
  padding: var(--premium-space-4) !important;
  margin-bottom: var(--premium-space-4) !important;
}

/* Section spacing */
.section {
  margin-bottom: var(--premium-space-6);
}

/* ========================================
   BUTTON IMPROVEMENTS
   ======================================== */

.btn {
  padding: var(--premium-space-2) var(--premium-space-4) !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: var(--premium-text-base) !important;
  font-weight: var(--premium-font-semibold) !important;
  transition: var(--premium-transition) !important;
  letter-spacing: 0.02em !important;
}

.btn-primary {
  background: var(--premium-neon-orange) !important;
  border: 2px solid var(--premium-neon-orange) !important;
  color: #000 !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--premium-neon-blue) !important;
  border-color: var(--premium-neon-blue) !important;
  box-shadow: var(--premium-shadow-glow-blue) !important;
  transform: translateY(-2px) !important;
}

/* ========================================
   GRID LAYOUT IMPROVEMENTS
   ======================================== */

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--premium-space-4);
  margin-top: var(--premium-space-4);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .exercise-card {
    padding: var(--premium-space-2) !important;
  }
  
  .exercise-name,
  .exercise-card h3 {
    font-size: var(--premium-text-xl) !important;
  }
  
  .exercise-stats {
    gap: var(--premium-space-1);
    padding: var(--premium-space-2);
  }
  
  .stat-value {
    font-size: var(--premium-text-xl);
  }
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Stagger animation for cards */
.exercise-card:nth-child(1) { animation-delay: 0.1s; }
.exercise-card:nth-child(2) { animation-delay: 0.2s; }
.exercise-card:nth-child(3) { animation-delay: 0.3s; }
.exercise-card:nth-child(4) { animation-delay: 0.4s; }
.exercise-card:nth-child(5) { animation-delay: 0.5s; }
.exercise-card:nth-child(6) { animation-delay: 0.6s; }

/* ========================================
   UTILITY CLASSES
   ======================================== */

.premium-text-gradient {
  background: linear-gradient(135deg, var(--premium-neon-orange), var(--premium-neon-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.premium-glow-orange {
  box-shadow: var(--premium-shadow-glow-orange);
}

.premium-glow-blue {
  box-shadow: var(--premium-shadow-glow-blue);
}

/* ========================================
   HEADER REDESIGN - PREMIUM TYPOGRAPHY
   ======================================== */

/* Remove emoji from header */
header h1::before {
  content: '' !important;
}

/* Premium header styling */
header h1 {
  font-size: 3rem !important;
  font-weight: var(--premium-font-black, 900) !important;
  background: linear-gradient(135deg, var(--premium-neon-orange), var(--premium-neon-blue)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
}

/* Hide emoji in header text */
header h1 {
  font-family: var(--premium-font-primary) !important;
}

/* Subtitle styling */
header .subtitle {
  font-size: var(--premium-text-lg) !important;
  font-weight: var(--premium-font-medium) !important;
  color: var(--premium-text-secondary) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Remove emoji decorations */
.subtitle::before,
.subtitle::after {
  display: none !important;
}

/* ========================================
   HERO SECTION IMPROVEMENTS
   ======================================== */

/* Hero badge - remove emoji */
.hero-badge {
  background: rgba(255, 107, 53, 0.1) !important;
  color: var(--premium-neon-orange) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  padding: 8px 16px !important;
  border-radius: var(--premium-radius-full) !important;
  font-size: var(--premium-text-sm) !important;
  font-weight: var(--premium-font-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Hero CTA button */
.hero-cta {
  background: var(--premium-neon-orange) !important;
  color: #000 !important;
  border: none !important;
  padding: 16px 32px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: var(--premium-text-lg) !important;
  font-weight: var(--premium-font-bold) !important;
  transition: var(--premium-transition) !important;
}

.hero-cta:hover {
  background: var(--premium-neon-blue) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--premium-shadow-glow-blue) !important;
}

/* Feature cards - remove emojis */
.feature-icon {
  display: none !important;
}

.feature-card {
  background: var(--premium-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--premium-radius-lg) !important;
  padding: var(--premium-space-4) !important;
  transition: var(--premium-transition) !important;
}

.feature-card:hover {
  background: var(--premium-bg-card-hover) !important;
  border-color: rgba(255, 107, 53, 0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--premium-shadow-lg) !important;
}

.feature-title {
  font-size: var(--premium-text-xl) !important;
  font-weight: var(--premium-font-bold) !important;
  color: var(--premium-text-primary) !important;
  margin-bottom: var(--premium-space-2) !important;
}

.feature-description {
  font-size: var(--premium-text-sm) !important;
  color: var(--premium-text-secondary) !important;
  line-height: 1.6 !important;
}

/* ========================================
   BYPASS LANDING - SHOW PROFILE DIRECTLY (for testing)
   ======================================== */

/* Uncomment to bypass landing page:
.hero-landing {
  display: none !important;
}

.sidebar {
  display: block !important;
}

#profile-section {
  display: block !important;
}
*/