/*
 * CENTRALIZED COLOR MANAGEMENT
 * All colors and text colors for the entire site are defined here.
 * Change colors in this file to instantly update the entire website.
 *
 * HOW TO USE:
 * 1. Find the section you want to change (e.g., "PRIMARY BRAND COLORS")
 * 2. Update the hex color value (e.g., change #4b58a0 to #2563eb)
 * 3. Save the file - changes apply site-wide automatically!
 *
 * QUICK COLOR CHANGES:
 * - Brand Color: Change --primary-color
 * - Body Background: Change --body-bg
 * - Text Color: Change --text-primary
 * - Card Background: Change --card-bg
 *
 * PRO TIP: Use the theme variants at the bottom for quick theme switching!
 * ============================================================================
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     ============================================ */
  --primary-color: #4b58a0;
  --primary-dark: #3a4580;
  --primary-light: #6b78c0;
  --primary-lighter: #afb6e4;
  --primary-lightest: #e8eaf5;

  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --body-bg: #f6fbfb;           /* Main body background (cream) */
  --card-bg: #ffffff;           /* Card background (white) */
  --hero-bg: #f6fbfb;           /* Hero section background */
  --footer-bg: #f6fbfb;         /* Footer background */
  --header-bg-start: #4b58a0;   /* Header gradient start */
  --header-bg-end: #3a4580;     /* Header gradient end */
  --sidebar-bg: #ffffff;        /* Sidebar background */
  --modal-bg: #ffffff;          /* Modal background */
  --overlay-bg: rgba(0, 0, 0, 0.5); /* Overlay/backdrop */

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #111827;      /* Main text color (dark) */
  --text-secondary: #4b5563;    /* Secondary text (medium gray) */
  --text-tertiary: #6b7280;     /* Tertiary text (light gray) */
  --text-inverse: #ffffff;      /* Text on dark backgrounds (white) */
  --text-muted: #9ca3af;        /* Muted/disabled text */
  --text-link: #4b58a0;         /* Link color */
  --text-link-hover: #3a4580;   /* Link hover color */

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-color: #e5e7eb;      /* Default border color */
  --border-color-dark: #d1d5db; /* Darker border */
  --border-color-light: #f3f4f6; /* Lighter border */

  /* ============================================
     STATE COLORS (Success, Error, Warning, Info)
     ============================================ */
  --success-color: #10b981;
  --success-bg: #d1fae5;
  --success-text: #065f46;

  --error-color: #ef4444;
  --error-bg: #fee2e2;
  --error-text: #991b1b;

  --warning-color: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;

  --info-color: #3b82f6;
  --info-bg: #dbeafe;
  --info-text: #1e40af;

  /* ============================================
     COMPONENT-SPECIFIC COLORS
     ============================================ */

  /* Header */
  --header-text: #ffffff;
  --header-link: #ffffff;
  --header-link-hover: rgba(255, 255, 255, 0.8);

  /* Hero Section */
  --hero-text: #111827;
  --hero-title: #111827;
  --hero-subtitle: #4b5563;

  /* Footer */
  --footer-text: #111827;
  --footer-link: #4b58a0;
  --footer-link-hover: rgba(75, 88, 160, 0.8);
  --footer-border: rgba(0, 0, 0, 0.1);

  /* Staff Cards */
  --card-border: #e5e7eb;
  --card-border-hover: #d1d5db;
  --card-shadow: rgba(0, 0, 0, 0.06);
  --card-shadow-hover: rgba(75, 88, 160, 0.15);
  --card-accent: linear-gradient(90deg, #4b58a0, #6b78c0);
  --card-image-border: #f3f4f6;
  --card-image-border-hover: #4b58a0;
  --card-name-text: #111827;
  --card-title-text: #4b58a0;
  --card-meta-text: #6b7280;

  /* Badges */
  --badge-primary-bg: #4b58a0;
  --badge-primary-text: #ffffff;
  --badge-info-bg: #3b82f6;
  --badge-info-text: #ffffff;
  --badge-success-bg: #10b981;
  --badge-success-text: #ffffff;
  --badge-warning-bg: #f59e0b;
  --badge-warning-text: #ffffff;

  /* Buttons */
  --btn-primary-bg: #4b58a0;
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: #3a4580;
  --btn-outline-border: #4b58a0;
  --btn-outline-text: #4b58a0;
  --btn-outline-hover-bg: #4b58a0;
  --btn-outline-hover-text: #ffffff;

  /* Forms */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-focus: #4b58a0;
  --input-text: #111827;
  --input-placeholder: #9ca3af;
  --label-text: #374151;

  /* Mobile Menu */
  --mobile-menu-bg: #ffffff;
  --mobile-menu-text: #111827;
  --mobile-menu-link: #111827;
  --mobile-menu-link-hover-bg: #f3f4f6;
  --mobile-menu-overlay: rgba(0, 0, 0, 0.5);

  /* Sidebar */
  --sidebar-text: #111827;
  --sidebar-link: #4b5563;
  --sidebar-link-hover: #4b58a0;
  --sidebar-link-active-bg: #e8eaf5;
  --sidebar-link-active-text: #4b58a0;

  /* Search */
  --search-bg: #ffffff;
  --search-border: #d1d5db;
  --search-border-focus: #4b58a0;
  --search-text: #111827;
  --search-placeholder: #9ca3af;
  --search-icon: #6b7280;

  /* ============================================
     NEUTRAL GRAYS (For reference)
     ============================================ */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --black: #000000;
}

/* ============================================
   DARK MODE (Optional - uncomment to enable)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #1f2937;
    --card-bg: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #4b5563;
  }
}
*/

/* ============================================
   THEME VARIANTS (Uncomment to use alternative themes)
   ============================================ */

/* Blue Theme */
/*
:root {
  --primary-color: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
}
*/

/* Green Theme */
/*
:root {
  --primary-color: #059669;
  --primary-dark: #047857;
  --primary-light: #10b981;
}
*/

/* Purple Theme */
/*
:root {
  --primary-color: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-light: #8b5cf6;
}
*/