/**
 * ====================================
 * ELITE COMPAGNONS - THEME COLOR SYSTEM
 * Responsive & Consistent Design Framework
 * ==================================== 
 */

/**
 * COLOR PALETTE
 * 
 * This file defines the complete color system for the Elite Compagnons platform.
 * All colors are designed to work seamlessly across light and dark modes.
 */

/* ====================================
   PRIMARY COLOR SYSTEM
   ==================================== */

:root {
  /* Primary: Main brand color */
  --color-primary: #5e72e4;
  --color-primary-light: #8b9cfe;
  --color-primary-lighter: #c5cffb;
  --color-primary-dark: #2e3c8c;
  --color-primary-darker: #1f2557;

  /* Secondary: Accent color */
  --color-secondary: #11cdef;
  --color-secondary-light: #4dd8e8;
  --color-secondary-lighter: #95e8f0;
  --color-secondary-dark: #0a8fa3;
  --color-secondary-darker: #055f75;

  /* ====================================
     STATUS COLORS
     ==================================== */

  /* Success: Positive actions and confirmations */
  --color-success: #2dce89;
  --color-success-light: #70dd8a;
  --color-success-lighter: #a8e6c1;
  --color-success-dark: #1ea346;
  --color-success-darker: #0f5a24;

  /* Danger: Destructive actions and errors */
  --color-danger: #f5365c;
  --color-danger-light: #f97e87;
  --color-danger-lighter: #fcadba;
  --color-danger-dark: #c1203f;
  --color-danger-darker: #7a0f26;

  /* Warning: Caution and warnings */
  --color-warning: #fb6340;
  --color-warning-light: #fcaa7e;
  --color-warning-lighter: #fdd6c5;
  --color-warning-dark: #c9451f;
  --color-warning-darker: #7a2810;

  /* Info: Informational messages */
  --color-info: #11cdef;
  --color-info-light: #4dd8e8;
  --color-info-lighter: #95e8f0;
  --color-info-dark: #0a8fa3;
  --color-info-darker: #055f75;

  /* ====================================
     NEUTRAL COLORS
     ==================================== */

  /* White */
  --color-white: #ffffff;

  /* Black */
  --color-black: #32325d;

  /* Gray Scale - Designed for text, borders, backgrounds */
  --color-gray-50: #f7f7f7;     /* Lightest gray - app backgrounds */
  --color-gray-100: #f5f5f5;    /* Very light - card backgrounds */
  --color-gray-200: #e9ecef;    /* Light - borders, dividers */
  --color-gray-300: #dee2e6;    /* Light gray - subtle borders */
  --color-gray-400: #cbd5e0;    /* Medium-light - disabled states */
  --color-gray-500: #a0aec0;    /* Medium - secondary text */
  --color-gray-600: #718096;    /* Medium-dark - body text */
  --color-gray-700: #4a5568;    /* Dark - headings */
  --color-gray-800: #2d3748;    /* Very dark - strong text */
  --color-gray-900: #1a202c;    /* Darkest - primary text */

  /* ====================================
     SPECIALIZED COLORS
     ==================================== */

  /* Background Colors */
  --color-bg-light: var(--color-gray-50);
  --color-bg-default: var(--color-white);
  --color-bg-dark: var(--color-gray-900);

  /* Text Colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: var(--color-white);

  /* Border Colors */
  --color-border-light: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-dark: var(--color-gray-600);

  /* Overlay Colors */
  --color-overlay-light: rgba(0, 0, 0, 0.1);
  --color-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.8);

  /* Transparent Variations */
  --color-primary-rgb: 94, 114, 228;
  --color-secondary-rgb: 17, 205, 239;
  --color-success-rgb: 45, 206, 137;
  --color-danger-rgb: 245, 54, 92;
  --color-warning-rgb: 251, 99, 64;
  --color-info-rgb: 17, 205, 239;

  /* ====================================
     STATE COLORS
     ==================================== */

  /* Hover States */
  --color-hover-light: var(--color-gray-100);
  --color-hover-dark: var(--color-gray-200);

  /* Focus States */
  --color-focus: var(--color-primary);
  --color-focus-ring: rgba(94, 114, 228, 0.25);

  /* Active States */
  --color-active: var(--color-primary-dark);
  --color-active-bg: rgba(94, 114, 228, 0.1);

  /* Disabled States */
  --color-disabled: var(--color-gray-400);
  --color-disabled-bg: var(--color-gray-100);

  /* ====================================
     SEMANTIC COLOR ASSIGNMENTS
     ==================================== */

  /* Links */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);
  --color-link-visited: var(--color-primary-dark);

  /* Form Elements */
  --color-input-border: var(--color-border-light);
  --color-input-bg: var(--color-white);
  --color-input-text: var(--color-text-primary);
  --color-input-placeholder: var(--color-text-tertiary);
  --color-input-focus-border: var(--color-primary);
  --color-input-focus-ring: var(--color-focus-ring);

  /* Badges & Labels */
  --color-badge-primary: rgba(94, 114, 228, 0.1);
  --color-badge-secondary: rgba(17, 205, 239, 0.1);
  --color-badge-success: rgba(45, 206, 137, 0.1);
  --color-badge-danger: rgba(245, 54, 92, 0.1);
  --color-badge-warning: rgba(251, 99, 64, 0.1);
  --color-badge-info: rgba(17, 205, 239, 0.1);

  /* Shadows */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-dark: rgba(0, 0, 0, 0.2);
}

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

@media (prefers-color-scheme: dark) {
  :root {
    /* Text colors in dark mode */
    --color-text-primary: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: var(--color-gray-900);

    /* Background colors in dark mode */
    --color-bg-light: var(--color-gray-800);
    --color-bg-default: var(--color-gray-900);

    /* Border colors in dark mode */
    --color-border-light: var(--color-gray-700);
    --color-border-default: var(--color-gray-600);
    --color-border-dark: var(--color-gray-400);

    /* Input styles in dark mode */
    --color-input-bg: var(--color-gray-800);
    --color-input-text: var(--color-gray-100);
    --color-input-border: var(--color-gray-700);

    /* Hover states in dark mode */
    --color-hover-light: var(--color-gray-700);
    --color-hover-dark: var(--color-gray-600);

    /* Overlays in dark mode */
    --color-overlay-light: rgba(255, 255, 255, 0.1);
    --color-overlay-medium: rgba(255, 255, 255, 0.2);

    /* Shadows in dark mode */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);

    /* Badge backgrounds in dark mode */
    --color-badge-primary: rgba(94, 114, 228, 0.2);
    --color-badge-secondary: rgba(17, 205, 239, 0.2);
    --color-badge-success: rgba(45, 206, 137, 0.2);
    --color-badge-danger: rgba(245, 54, 92, 0.2);
    --color-badge-warning: rgba(251, 99, 64, 0.2);
  }
}

/* ====================================
   HIGH CONTRAST MODE
   ==================================== */

@media (prefers-contrast: more) {
  :root {
    --color-primary: #2e3c8c;
    --color-primary-dark: #1f2557;
    --color-secondary: #0a8fa3;
    --color-success: #0f5a24;
    --color-danger: #7a0f26;
    --color-warning: #7a2810;
    --color-info: #055f75;
  }
}

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

/* Primary Colors */
.text-primary { color: var(--color-primary) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-lighter { background-color: var(--color-primary-lighter) !important; }
.border-primary { border-color: var(--color-primary) !important; }

/* Secondary Colors */
.text-secondary { color: var(--color-secondary) !important; }
.text-secondary-light { color: var(--color-secondary-light) !important; }
.text-secondary-dark { color: var(--color-secondary-dark) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; }
.bg-secondary-lighter { background-color: var(--color-secondary-lighter) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* Success Colors */
.text-success { color: var(--color-success) !important; }
.text-success-light { color: var(--color-success-light) !important; }
.text-success-dark { color: var(--color-success-dark) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-success-lighter { background-color: var(--color-success-lighter) !important; }
.border-success { border-color: var(--color-success) !important; }

/* Danger Colors */
.text-danger { color: var(--color-danger) !important; }
.text-danger-light { color: var(--color-danger-light) !important; }
.text-danger-dark { color: var(--color-danger-dark) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-light { background-color: var(--color-danger-light) !important; }
.bg-danger-lighter { background-color: var(--color-danger-lighter) !important; }
.border-danger { border-color: var(--color-danger) !important; }

/* Warning Colors */
.text-warning { color: var(--color-warning) !important; }
.text-warning-light { color: var(--color-warning-light) !important; }
.text-warning-dark { color: var(--color-warning-dark) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-warning-lighter { background-color: var(--color-warning-lighter) !important; }
.border-warning { border-color: var(--color-warning) !important; }

/* Info Colors */
.text-info { color: var(--color-info) !important; }
.text-info-light { color: var(--color-info-light) !important; }
.text-info-dark { color: var(--color-info-dark) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-light { background-color: var(--color-info-light) !important; }
.bg-info-lighter { background-color: var(--color-info-lighter) !important; }
.border-info { border-color: var(--color-info) !important; }

/* Neutral Colors */
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }
.text-dark { color: var(--color-gray-900) !important; }
.text-muted { color: var(--color-text-tertiary) !important; }

.bg-white { background-color: var(--color-white) !important; }
.bg-light { background-color: var(--color-gray-50) !important; }
.bg-dark { background-color: var(--color-gray-900) !important; }
.bg-gray { background-color: var(--color-gray-100) !important; }

/* ====================================
   GRADIENT UTILITIES
   ==================================== */

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: white;
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%) !important;
  color: white;
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%) !important;
  color: white;
}

.bg-gradient-danger {
  background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%) !important;
  color: white;
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%) !important;
  color: white;
}

/* ====================================
   OPACITY UTILITIES
   ==================================== */

.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ====================================
   THEME IMPLEMENTATION GUIDE
   ==================================== */

/**
 * HOW TO USE THIS COLOR SYSTEM:
 *
 * 1. HTML CLASSES:
 *    <span class="text-primary">Primary text</span>
 *    <div class="bg-primary">Primary background</div>
 *    <div class="border-primary">Primary border</div>
 *
 * 2. CSS VARIABLES:
 *    color: var(--color-primary);
 *    background-color: var(--color-success);
 *    border-color: var(--color-danger);
 *
 * 3. GRADIENTS:
 *    <div class="bg-gradient-primary">Gradient background</div>
 *
 * 4. RESPONSIVE COLORS:
 *    Use media queries with CSS variables to change colors by breakpoint:
 *
 *    @media (max-width: 768px) {
 *      :root {
 *        --color-primary: #2e3c8c;
 *      }
 *    }
 *
 * 5. COMPONENT THEMING:
 *    Create component-specific color variables:
 *
 *    .button {
 *      color: var(--button-text, var(--color-text-primary));
 *      background-color: var(--button-bg, var(--color-primary));
 *    }
 *
 * 6. ACCESSIBILITY CONSIDERATIONS:
 *    - Ensure sufficient contrast (WCAG AA: 4.5:1 for text)
 *    - Don't rely solely on color to convey information
 *    - Use semantic color names (success, danger, warning)
 *    - Support dark mode and high contrast preferences
 */

/* ====================================
   COLOR CONTRAST REFERENCE
   ==================================== */

/**
 * WCAG CONTRAST RATIOS (AA Standard: 4.5:1, AAA: 7:1)
 *
 * Primary Color (#5e72e4) on:
 *   - White: 4.8:1 ✓ (meets AA)
 *   - Gray-50: 4.5:1 ✓ (meets AA)
 *   - Gray-100: 4.2:1 ✗ (use lighter primary)
 *
 * Secondary Color (#11cdef) on:
 *   - White: 5.1:1 ✓ (meets AA)
 *   - Gray-50: 4.8:1 ✓ (meets AA)
 *
 * Success Color (#2dce89) on:
 *   - White: 5.4:1 ✓ (meets AA)
 *   - Gray-50: 5.1:1 ✓ (meets AA)
 *
 * Danger Color (#f5365c) on:
 *   - White: 4.9:1 ✓ (meets AA)
 *   - Gray-50: 4.6:1 ✓ (meets AA)
 */