/**
 * UnitedForHelp Color Configuration System
 * 
 * This file contains all color definitions for the site in both light and dark modes.
 * Simply change the hex color codes below to customize the entire site's appearance.
 * 
 * Usage: Colors are applied automatically via CSS variables throughout the site.
 * Format: Each color has a descriptive name and supports both light and dark mode variants.
 */

:root {
  /* ========================================
     HEADER COLORS
     ======================================== */
  
  /* Header Background */
  --header-bg-light: rgba(255, 255, 255, 0.95);
  --header-bg-dark: rgba(15, 23, 42, 0.95);
  
  /* Header Menu Items */
  --header-menu-text-light: #374151;        /* Gray-700 */
  --header-menu-text-dark: #d1d5db;         /* Gray-300 */
  --header-menu-text-hover-light: #2563eb;  /* Blue-600 */
  --header-menu-text-hover-dark: #60a5fa;   /* Blue-400 */
  --header-menu-bg-hover-light: #eff6ff;    /* Blue-50 */
  --header-menu-bg-hover-dark: #334155;     /* Slate-700 */
  
  /* Header Logo */
  --header-logo-gradient-start-light: #2563eb;  /* Blue-600 */
  --header-logo-gradient-end-light: #1d4ed8;    /* Blue-700 */
  --header-logo-gradient-start-dark: #60a5fa;   /* Blue-400 */
  --header-logo-gradient-end-dark: #3b82f6;     /* Blue-500 */
  
  /* Header Separator Line */
  --header-separator-light: rgba(229, 231, 235, 0.5);  /* Gray-200/50 */
  --header-separator-dark: rgba(71, 85, 105, 0.5);     /* Slate-600/50 */

  /* ========================================
     FOOTER COLORS
     ======================================== */
  
  /* Footer Background */
  --footer-bg-light: rgba(255, 255, 255, 0.9);
  --footer-bg-dark: rgba(15, 23, 42, 0.9);
  
  /* Footer Headers */
  --footer-header-text-light: #111827;      /* Gray-900 */
  --footer-header-text-dark: #f9fafb;       /* Gray-50 */
  
  /* Footer Links */
  --footer-link-text-light: #6b7280;        /* Gray-500 */
  --footer-link-text-dark: #9ca3af;         /* Gray-400 */
  --footer-link-text-hover-light: #2563eb;  /* Blue-600 */
  --footer-link-text-hover-dark: #60a5fa;   /* Blue-400 */
  
  /* Footer Social Media Icons */
  --footer-social-icon-light: #6b7280;      /* Gray-500 */
  --footer-social-icon-dark: #9ca3af;       /* Gray-400 */
  --footer-social-icon-hover-light: #2563eb; /* Blue-600 */
  --footer-social-icon-hover-dark: #60a5fa;  /* Blue-400 */
  
  /* Footer Separator Line */
  --footer-separator-light: rgba(229, 231, 235, 0.5);  /* Gray-200/50 */
  --footer-separator-dark: rgba(71, 85, 105, 0.5);     /* Slate-600/50 */

  /* ========================================
     MAIN CONTENT COLORS
     ======================================== */
  
  /* Main Body Background */
  --body-bg-gradient-start-light: #dbeafe;  /* Blue-100 */
  --body-bg-gradient-end-light: #e0e7ff;    /* Indigo-100 */
  --body-bg-gradient-start-dark: #0f172a;   /* Slate-900 */
  --body-bg-gradient-end-dark: #1e293b;     /* Slate-800 */
  
  /* Main Content Area Background */
  --main-content-bg-light: #ffffff;
  --main-content-bg-dark: #0f172a;          /* Slate-900 */
  
  /* Main Body Text */
  --body-text-light: #111827;               /* Gray-900 */
  --body-text-dark: #f1f5f9;                /* Slate-100 */
  
  /* Main Site Titles/Headers (H1, H2) */
  --main-title-text-light: #111827;         /* Gray-900 */
  --main-title-text-dark: #f8fafc;          /* Slate-50 */
  
  /* Sub-Header Text (H3, H4) */
  --sub-header-text-light: #374151;         /* Gray-700 */
  --sub-header-text-dark: #e2e8f0;          /* Slate-200 */
  
  /* Sub-Header Slogan Text */
  --slogan-text-light: #6b7280;             /* Gray-500 */
  --slogan-text-dark: #94a3b8;              /* Slate-400 */

  /* ========================================
     CARD COLORS
     ======================================== */
  
  /* Card Background */
  --card-bg-light: rgba(255, 255, 255, 0.95);
  --card-bg-dark: rgba(30, 41, 59, 0.95);   /* Slate-800/95 */
  
  /* Card Border */
  --card-border-light: rgba(255, 255, 255, 0.2);
  --card-border-dark: rgba(71, 85, 105, 0.3);  /* Slate-600/30 */
  
  /* Card Titles */
  --card-title-text-light: #111827;         /* Gray-900 */
  --card-title-text-dark: #f8fafc;          /* Slate-50 */
  
  /* Card Text */
  --card-text-light: #6b7280;               /* Gray-500 */
  --card-text-dark: #cbd5e1;                /* Slate-300 */
  
  /* Card Hover Effects */
  --card-hover-shadow-light: rgba(0, 0, 0, 0.1);
  --card-hover-shadow-dark: rgba(0, 0, 0, 0.3);

  /* ========================================
     BUTTON COLORS
     ======================================== */
  
  /* Main CTA Buttons (Primary) */
  --btn-primary-bg-light: #2563eb;          /* Blue-600 */
  --btn-primary-bg-dark: #3b82f6;           /* Blue-500 */
  --btn-primary-bg-hover-light: #1d4ed8;    /* Blue-700 */
  --btn-primary-bg-hover-dark: #2563eb;     /* Blue-600 */
  --btn-primary-text-light: #ffffff;
  --btn-primary-text-dark: #ffffff;
  
  /* Secondary CTA Buttons */
  --btn-secondary-bg-light: #f3f4f6;        /* Gray-100 */
  --btn-secondary-bg-dark: #374151;         /* Gray-700 */
  --btn-secondary-bg-hover-light: #e5e7eb;  /* Gray-200 */
  --btn-secondary-bg-hover-dark: #4b5563;   /* Gray-600 */
  --btn-secondary-text-light: #374151;      /* Gray-700 */
  --btn-secondary-text-dark: #d1d5db;       /* Gray-300 */
  
  /* Button Borders */
  --btn-border-light: rgba(229, 231, 235, 0.5);  /* Gray-200/50 */
  --btn-border-dark: rgba(75, 85, 99, 0.5);      /* Gray-600/50 */

  /* ========================================
     FORM ELEMENTS
     ======================================== */
  
  /* Input Fields */
  --input-bg-light: #ffffff;
  --input-bg-dark: #1f2937;                 /* Gray-800 */
  --input-border-light: #d1d5db;            /* Gray-300 */
  --input-border-dark: #4b5563;             /* Gray-600 */
  --input-text-light: #111827;              /* Gray-900 */
  --input-text-dark: #f9fafb;               /* Gray-50 */
  --input-placeholder-light: #9ca3af;       /* Gray-400 */
  --input-placeholder-dark: #6b7280;        /* Gray-500 */

  /* ========================================
     ACCENT COLORS
     ======================================== */
  
  /* Links */
  --link-color-light: #2563eb;              /* Blue-600 */
  --link-color-dark: #60a5fa;               /* Blue-400 */
  --link-hover-light: #1d4ed8;              /* Blue-700 */
  --link-hover-dark: #3b82f6;               /* Blue-500 */
  
  /* Success/Error States */
  --success-color-light: #059669;           /* Emerald-600 */
  --success-color-dark: #10b981;            /* Emerald-500 */
  --error-color-light: #dc2626;             /* Red-600 */
  --error-color-dark: #ef4444;              /* Red-500 */
  --warning-color-light: #d97706;           /* Amber-600 */
  --warning-color-dark: #f59e0b;            /* Amber-500 */
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-theme="dark"] {
  /* Header Colors */
  --header-bg: var(--header-bg-dark) !important;
  --header-menu-text: var(--header-menu-text-dark) !important;
  --header-menu-text-hover: var(--header-menu-text-hover-dark) !important;
  --header-menu-bg-hover: var(--header-menu-bg-hover-dark) !important;
  --header-logo-gradient-start: var(--header-logo-gradient-start-dark) !important;
  --header-logo-gradient-end: var(--header-logo-gradient-end-dark) !important;
  --header-separator: var(--header-separator-dark) !important;
  
  /* Footer Colors */
  --footer-bg: var(--footer-bg-dark) !important;
  --footer-header-text: var(--footer-header-text-dark) !important;
  --footer-link-text: var(--footer-link-text-dark) !important;
  --footer-link-text-hover: var(--footer-link-text-hover-dark) !important;
  --footer-social-icon: var(--footer-social-icon-dark) !important;
  --footer-social-icon-hover: var(--footer-social-icon-hover-dark) !important;
  --footer-separator: var(--footer-separator-dark) !important;
  
  /* Main Content Colors */
  --body-bg-gradient-start: var(--body-bg-gradient-start-dark) !important;
  --body-bg-gradient-end: var(--body-bg-gradient-end-dark) !important;
  --main-content-bg: var(--main-content-bg-dark) !important;
  --body-text: var(--body-text-dark) !important;
  --main-title-text: var(--main-title-text-dark) !important;
  --sub-header-text: var(--sub-header-text-dark) !important;
  --slogan-text: var(--slogan-text-dark) !important;
  
  /* Card Colors */
  --card-bg: var(--card-bg-dark) !important;
  --card-border: var(--card-border-dark) !important;
  --card-title-text: var(--card-title-text-dark) !important;
  --card-text: var(--card-text-dark) !important;
  --card-hover-shadow: var(--card-hover-shadow-dark) !important;
  
  /* Button Colors */
  --btn-primary-bg: var(--btn-primary-bg-dark) !important;
  --btn-primary-bg-hover: var(--btn-primary-bg-hover-dark) !important;
  --btn-primary-text: var(--btn-primary-text-dark) !important;
  --btn-secondary-bg: var(--btn-secondary-bg-dark) !important;
  --btn-secondary-bg-hover: var(--btn-secondary-bg-hover-dark) !important;
  --btn-secondary-text: var(--btn-secondary-text-dark) !important;
  --btn-border: var(--btn-border-dark) !important;
  
  /* Form Elements */
  --input-bg: var(--input-bg-dark) !important;
  --input-border: var(--input-border-dark) !important;
  --input-text: var(--input-text-dark) !important;
  --input-placeholder: var(--input-placeholder-dark) !important;
  
  /* Accent Colors */
  --link-color: var(--link-color-dark) !important;
  --link-hover: var(--link-hover-dark) !important;
  --success-color: var(--success-color-dark) !important;
  --error-color: var(--error-color-dark) !important;
  --warning-color: var(--warning-color-dark) !important;
}

/* ========================================
   LIGHT MODE DEFAULTS
   ======================================== */

[data-theme="light"], :root {
  /* Header Colors */
  --header-bg: var(--header-bg-light);
  --header-menu-text: var(--header-menu-text-light);
  --header-menu-text-hover: var(--header-menu-text-hover-light);
  --header-menu-bg-hover: var(--header-menu-bg-hover-light);
  --header-logo-gradient-start: var(--header-logo-gradient-start-light);
  --header-logo-gradient-end: var(--header-logo-gradient-end-light);
  --header-separator: var(--header-separator-light);
  
  /* Footer Colors */
  --footer-bg: var(--footer-bg-light);
  --footer-header-text: var(--footer-header-text-light);
  --footer-link-text: var(--footer-link-text-light);
  --footer-link-text-hover: var(--footer-link-text-hover-light);
  --footer-social-icon: var(--footer-social-icon-light);
  --footer-social-icon-hover: var(--footer-social-icon-hover-light);
  --footer-separator: var(--footer-separator-light);
  
  /* Main Content Colors */
  --body-bg-gradient-start: var(--body-bg-gradient-start-light);
  --body-bg-gradient-end: var(--body-bg-gradient-end-light);
  --main-content-bg: var(--main-content-bg-light);
  --body-text: var(--body-text-light);
  --main-title-text: var(--main-title-text-light);
  --sub-header-text: var(--sub-header-text-light);
  --slogan-text: var(--slogan-text-light);
  
  /* Card Colors */
  --card-bg: var(--card-bg-light);
  --card-border: var(--card-border-light);
  --card-title-text: var(--card-title-text-light);
  --card-text: var(--card-text-light);
  --card-hover-shadow: var(--card-hover-shadow-light);
  
  /* Button Colors */
  --btn-primary-bg: var(--btn-primary-bg-light);
  --btn-primary-bg-hover: var(--btn-primary-bg-hover-light);
  --btn-primary-text: var(--btn-primary-text-light);
  --btn-secondary-bg: var(--btn-secondary-bg-light);
  --btn-secondary-bg-hover: var(--btn-secondary-bg-hover-light);
  --btn-secondary-text: var(--btn-secondary-text-light);
  --btn-border: var(--btn-border-light);
  
  /* Form Elements */
  --input-bg: var(--input-bg-light);
  --input-border: var(--input-border-light);
  --input-text: var(--input-text-light);
  --input-placeholder: var(--input-placeholder-light);
  
  /* Accent Colors */
  --link-color: var(--link-color-light);
  --link-hover: var(--link-hover-light);
  --success-color: var(--success-color-light);
  --error-color: var(--error-color-light);
  --warning-color: var(--warning-color-light);
}

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

/* Quick color application classes */
.text-primary { color: var(--body-text) !important; }
.text-secondary { color: var(--sub-header-text) !important; }
.text-muted { color: var(--slogan-text) !important; }
.bg-primary { background-color: var(--main-content-bg) !important; }
.bg-card { background-color: var(--card-bg) !important; }
.border-primary { border-color: var(--card-border) !important; }

/* Button utility classes */
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-bg) !important;
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
}

.btn-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-border) !important;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover) !important;
}