/* ============================================
   OFFICIAL COLOR PALETTE - REVIVE YOUR HAIR
   ============================================
   
   Design Philosophy:
   - Green = Trust, Growth, Action (primary brand)
   - Gold = Premium, Important, Attention (use sparingly!)
   - Charcoal = Professional, Readable (all text)
   - White/Gray = Clean, Medical, Modern (backgrounds)
*/

:root {
  /* ==========================================
     PRIMARY COLORS
     ========================================== */
  --forest-green: #047857;           /* Main brand color - logo, primary buttons, links */
  --forest-green-dark: #065f46;      /* Hover states, depth */
  --forest-green-light: #10b981;     /* Lighter accents, gradients */

  /* ==========================================
     ACCENT COLOR (Use Sparingly!)
     ========================================== */
  --warm-gold: #f59e0b;              /* Special CTAs, badges, highlights */
  --warm-gold-light: #fbbf24;        /* Gold hover states */

  /* ==========================================
     NEUTRALS
     ========================================== */
  --charcoal: #1f2937;               /* Body text, headers */
  --charcoal-light: #374151;         /* Secondary text */
  --gray-dark: #4b5563;              /* Tertiary text */
  --gray-medium: #6b7280;            /* Muted text */
  --gray-light: #9ca3af;             /* Disabled states */

  /* ==========================================
     BACKGROUNDS
     ========================================== */
  --white: #ffffff;                  /* Main background */
  --gray-50: #f9fafb;                /* Light background sections */
  --gray-100: #f3f4f6;               /* Cards, alternating rows */
  --gray-200: #e5e7eb;               /* Borders, dividers */

  /* ==========================================
     SEMANTIC COLORS
     ========================================== */
  --success: #10b981;                /* Success messages, positive */
  --warning: #f59e0b;                /* Warnings, important notices */
  --error: #ef4444;                  /* Errors, alerts */
  --info: #3b82f6;                   /* Info messages */

  /* ==========================================
     BACKGROUND TINTS (for boxes/callouts)
     ========================================== */
  --green-tint: #f0fdf4;             /* Very light green for pro tips */
  --gold-tint: #fffbeb;              /* Very light gold for warnings */
  --gray-tint: #f9fafb;              /* Light gray for neutral boxes */

  /* ==========================================
     GRADIENTS
     ========================================== */
  /* Primary Gradient (headers, hero sections, important callouts) */
  --gradient-primary: linear-gradient(135deg, #047857 0%, #10b981 100%);
  
  /* Accent Bar (header, section dividers) */
  --gradient-accent: linear-gradient(90deg, #047857 0%, #f59e0b 100%);
  
  /* Subtle Background Gradient (large hero sections only) */
  --gradient-bg: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  
  /* Gold CTA Gradient (THE most important action - use once per page max) */
  --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);           /* Standard box shadow */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);           /* Elevated elements */
  --shadow-lg: 0 8px 24px rgba(4, 120, 87, 0.15);       /* Hover lift effect (green tint) */
  --shadow-focus: 0 0 0 3px rgba(4, 120, 87, 0.1);      /* Focus ring for inputs */
}

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

/* Background Colors */
.bg-primary { background-color: var(--forest-green); }
.bg-primary-light { background-color: var(--forest-green-light); }
.bg-accent { background-color: var(--warm-gold); }
.bg-white { background-color: var(--white); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }

/* Background Gradients */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-gold { background: var(--gradient-gold); }

/* Text Colors */
.text-primary { color: var(--forest-green); }
.text-accent { color: var(--warm-gold); }
.text-charcoal { color: var(--charcoal); }
.text-gray { color: var(--gray-medium); }
.text-white { color: var(--white); }

/* Borders */
.border-primary { border-color: var(--forest-green); }
.border-accent { border-color: var(--warm-gold); }
.border-gray { border-color: var(--gray-200); }

/* Box Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }