@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hide number input spinners on desktop only */
@screen md {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Theme CSS Variables */
:root, .theme-default {
  --primary-dark: #111827;
  --secondary-dark: #1F2937;
  --primary-text: #F3F4F6;
  --secondary-text: #9CA3AF;
  --primary-accent: #FFA500;
  --secondary-accent: #FBBF24;
  --secondary-dark-80: #40475FCC;
  --secondary-dark-50: #40475F80;
  --secondary-dark-20: #40475F33;
  --primary-accent-20: #F48A3533;
  --primary-accent-10: #F48A351A;
  --primary-accent-30: #F48A354D;
  --primary-accent-80: #F48A35CC;
  --primary-accent-90: #7a3700;
  --secondary-accent-20: #FFA35E33;
  --secondary-accent-80: #FFA35ECC;
  --primary-text-80: #D1D6E5CC;
  --red-500-30: #EF444480;
}
.theme-alt {
  --primary-dark: #f5f5f2;
  --secondary-dark: #FFFFFF;
  --primary-text: #2c2c2e;
  --secondary-text: #80808f;
  --primary-accent: #F48A35;
  --primary-accent-10: #F48A351A;
  --primary-accent-20: #F48A3533;
  --primary-accent-30: #F48A354D;
  --primary-accent-50: #F48A3580;
  --primary-accent-80: #F48A35CC;
  --primary-accent-90: #FFF7E6;
  --secondary-accent: #fff8d1;
  --secondary-accent-20: #fff8d133;
  --secondary-accent-80: #fff8d1CC;
  --secondary-dark-20: #FFFFFF33;
  --secondary-dark-50: #FFFFFF80;
  --secondary-dark-80: #FFFFFFCC;
  --primary-text-80: #2c2c2ecc;
  --red-500-30: #EF444480;
}

@layer components {
  .highlight-section {
    @apply ring-2 ring-primary-accent ring-opacity-70 rounded-lg transition-all duration-500;
  }
  
  .active-day-selection {
    @apply ring-4 ring-primary-accent ring-opacity-100 transform scale-[1.01] transition-all duration-300 bg-secondary-dark; /* To get 70% opacity, use 'opacity-70' for full element or add a custom bg-opacity utility for just the background. */
  }
  
  .day-selection-banner {
    @apply bg-gradient-to-r from-primary-accent-20 to-transparent border-l-4;
  }
}

/* Force Tailwind to generate custom graph color classes */
.bg-chest-graph {}
.bg-back-graph {}
.bg-legs-graph {}
.bg-shoulders-graph {}
.bg-arms-graph {}
.bg-core-graph {}
.bg-quads-graph {}
.bg-hamstrings-graph {}
.bg-triceps-graph {}
.bg-biceps-graph {}
.bg-glutes-graph {}
.bg-calves-graph {}
.bg-forearms-graph {}
.bg-adductors-graph {}
.bg-abductors-graph {}