/* ========================================
   GLOBAL COLOR SCHEME
   Professional Cleaning Service Theme
   ======================================== */

:root {
  /* =====================================
     PRIMARY COLORS - Brand Identity
     ===================================== */
  
  /* Gold/Yellow - Energy & Cleanliness */
  --color-primary: #fcb401;
  --color-primary-light: #FFC107;
  --color-primary-lighter: #FFD700;
  --color-primary-dark: #FFA000;
  
  /* Light Blue - Trust & Freshness */
  --color-secondary: #38b6ff;
  --color-secondary-light: #00BFFF;
  
  
  /* =====================================
     ACCENT COLORS - Service Categories
     ===================================== */
  
  --color-accent-blue: #3b82f6;
  --color-accent-blue-light: #0ea5e9;
  --color-accent-green: #10b981;
  --color-accent-orange: #f59e42;
  --color-accent-purple: #8b5cf6;
  --color-accent-red: #ef4444;
  
  
  /* =====================================
     NEUTRAL COLORS - Base & Text
     ===================================== */
  
  /* Dark Tones */
  --color-dark: #222;
  --color-dark-slate: #1e293b;
  --color-dark-gray: #4a5568;
  
  /* Medium Tones */
  --color-gray: #6c757d;
  
  /* Light Tones */
  --color-light: #f5f7fa;
  --color-light-blue: #c3cfe2;
  --color-light-gray: #e2e8f0;
  --color-white: #ffffff;
  
  
  /* =====================================
     SEMANTIC COLORS - Context-Based
     ===================================== */
  
  /* Backgrounds */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-light);
  --bg-dark: var(--color-dark-slate);
  --bg-footer: var(--color-dark-slate);
  
  /* Text Colors */
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-gray);
  --text-dark: var(--color-dark-gray);
  --text-light: var(--color-white);
  
  /* Borders */
  --border-light: var(--color-light-gray);
  --border-medium: var(--color-light-blue);
  
  /* Status Colors */
  --color-success: var(--color-accent-green);
  --color-warning: var(--color-accent-orange);
  --color-error: var(--color-accent-red);
  --color-info: var(--color-accent-blue-light);
  
  
  /* =====================================
     GRADIENTS
     ===================================== */
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-blue-light) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(252, 180, 1, 0.9), rgba(56, 182, 255, 0.9));
  
  
  /* =====================================
     SHADOWS
     ===================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-gold: 0 4px 14px 0 rgba(252, 180, 1, 0.39);
  --shadow-blue: 0 4px 14px 0 rgba(56, 182, 255, 0.39);
}


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

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark-slate); }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-dark { color: var(--text-dark); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--text-secondary); }

/* Accent Text Colors */
.text-blue { color: var(--color-accent-blue); }
.text-green { color: var(--color-accent-green); }
.text-orange { color: var(--color-accent-orange); }
.text-purple { color: var(--color-accent-purple); }
.text-red { color: var(--color-accent-red); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-hero { background: var(--gradient-hero); }

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