/* ============================================
   Intelligorithm Global Color System
   VIBRANT & FASCINATING Color Palette
   Designed to captivate and engage users
   ============================================ */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     Deep, vibrant, eye-catching blues
     ============================================ */
  --color-primary: #2563eb;           /* Blue 600 - Deep, vibrant, trustworthy */
  --color-primary-dark: #1d4ed8;     /* Blue 700 - Rich depth for hover */
  --color-primary-light: #3b82f6;    /* Blue 500 - Lighter vibrant variant */
  --color-primary-lighter: #60a5fa;  /* Blue 400 - Bright highlights */
  --color-primary-lightest: #dbeafe;  /* Blue 100 - Very light backgrounds */

  /* ============================================
     SECONDARY COLORS
     Deep, sophisticated darks
     ============================================ */
  --color-secondary: #0f172a;         /* Slate 900 - Deepest professional dark */
  --color-secondary-dark: #020617;   /* Slate 950 - Ultra deep */
  --color-secondary-light: #1e293b; /* Slate 800 - Medium dark */
  --color-secondary-lighter: #334155; /* Slate 700 - Lighter dark */

  /* ============================================
     ACCENT COLORS - VIBRANT & FASCINATING
     Eye-catching colors for maximum engagement
     ============================================ */
  --color-accent-purple: #a855f7;    /* Purple 500 - Vibrant, creative, fascinating */
  --color-accent-purple-light: #c084fc; /* Purple 400 - Bright purple */
  --color-accent-purple-dark: #9333ea; /* Purple 600 - Deep purple */
  
  --color-accent-cyan: #06b6d4;       /* Cyan 500 - Fresh, modern, tech-forward */
  --color-accent-cyan-light: #22d3ee; /* Cyan 400 - Bright cyan */
  --color-accent-cyan-dark: #0891b2;  /* Cyan 600 - Deep cyan */
  
  --color-accent-pink: #ec4899;      /* Pink 500 - Energetic, modern */
  --color-accent-pink-light: #f472b6; /* Pink 400 - Bright pink */
  
  --color-accent-orange: #f97316;    /* Orange 500 - Warm, energetic */
  --color-accent-orange-light: #fb923c; /* Orange 400 - Bright orange */
  
  --color-accent-emerald: #10b981;   /* Emerald 500 - Success, positive */
  --color-accent-emerald-light: #34d399; /* Emerald 400 - Light emerald */

  /* ============================================
     NEUTRAL COLORS
     Text, backgrounds, borders
     ============================================ */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ============================================
     TEXT COLORS
     Semantic text colors
     ============================================ */
  --color-text-primary: #111827;       /* Gray 900 - Main text */
  --color-text-secondary: #4b5563;    /* Gray 600 - Secondary text */
  --color-text-muted: #6b7280;         /* Gray 500 - Muted text */
  --color-text-light: #9ca3af;         /* Gray 400 - Light text */
  --color-text-inverse: #ffffff;       /* White - Text on dark backgrounds */

  /* ============================================
     BACKGROUND COLORS
     Semantic background colors
     ============================================ */
  --color-bg-primary: #ffffff;         /* White - Main background */
  --color-bg-secondary: #f9fafb;       /* Gray 50 - Secondary background */
  --color-bg-tertiary: #f3f4f6;        /* Gray 100 - Tertiary background */
  --color-bg-dark: #0f172a;            /* Slate 900 - Dark background */
  --color-bg-darker: #020617;          /* Slate 950 - Darker background */

  /* ============================================
     STATUS COLORS
     Success, warning, error, info
     ============================================ */
  --color-success: #10b981;            /* Emerald 500 */
  --color-success-light: #d1fae5;     /* Emerald 100 */
  --color-success-dark: #059669;       /* Emerald 600 */

  --color-warning: #f59e0b;            /* Amber 500 */
  --color-warning-light: #fef3c7;      /* Amber 100 */
  --color-warning-dark: #d97706;       /* Amber 600 */

  --color-error: #ef4444;              /* Red 500 */
  --color-error-light: #fee2e2;        /* Red 100 */
  --color-error-dark: #dc2626;         /* Red 600 */

  --color-info: #06b6d4;               /* Cyan 500 */
  --color-info-light: #cffafe;         /* Cyan 100 */
  --color-info-dark: #0891b2;          /* Cyan 600 */

  /* ============================================
     BORDER COLORS
     ============================================ */
  --color-border-light: #e5e7eb;       /* Gray 200 */
  --color-border-medium: #d1d5db;     /* Gray 300 */
  --color-border-dark: #9ca3af;       /* Gray 400 */
  --color-border-primary: #2563eb;     /* Primary color for borders */

  /* ============================================
     SHADOW COLORS
     ============================================ */
  --color-shadow-sm: rgba(0, 0, 0, 0.05);
  --color-shadow-md: rgba(0, 0, 0, 0.1);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);
  --color-shadow-primary: rgba(37, 99, 235, 0.25);  /* Primary with opacity - more vibrant */
  --color-shadow-primary-lg: rgba(37, 99, 235, 0.35);
  --color-shadow-purple: rgba(168, 85, 247, 0.25);  /* Purple shadow */
  --color-shadow-cyan: rgba(6, 182, 212, 0.25);    /* Cyan shadow */

  /* ============================================
     GRADIENT COLORS - FASCINATING & MODERN
     Eye-catching gradients for maximum impact
     ============================================ */
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  --gradient-primary-vertical: linear-gradient(180deg, #2563eb 0%, #3b82f6 100%);
  --gradient-accent: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  --gradient-hero: linear-gradient(135deg, #2563eb 0%, #a855f7 50%, #06b6d4 100%);
  --gradient-vibrant: linear-gradient(135deg, #2563eb 0%, #a855f7 30%, #ec4899 60%, #06b6d4 100%);
  --gradient-warm: linear-gradient(135deg, #2563eb 0%, #f97316 100%);
  --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  --gradient-purple-pink: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);

  /* ============================================
     LOGO-SPECIFIC COLORS
     Colors optimized for logo design
     ============================================ */
  --logo-primary: #2563eb;             /* Main logo color - vibrant blue */
  --logo-accent-1: #a855f7;           /* Logo accent - vibrant purple */
  --logo-accent-2: #06b6d4;           /* Logo accent - fresh cyan */
  --logo-gradient: linear-gradient(135deg, #2563eb 0%, #a855f7 50%, #06b6d4 100%);

  /* ============================================
     LEGACY COMPATIBILITY
     Map old variable names to new system
     ============================================ */
  --primary-color: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --secondary-color: var(--color-secondary);
  --secondary-light: var(--color-secondary-light);
  --accent-color: var(--color-accent-purple);
  --accent-light: var(--color-accent-purple-light);
  --accent-cyan: var(--color-accent-cyan);
  --text-dark: var(--color-text-primary);
  --text-light: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --white: var(--color-white);
  --light-gray: var(--color-gray-100);
  --border-color: var(--color-border-light);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-dark: var(--color-bg-dark);
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-bg-primary: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;
    --color-border-light: #374151;
    --color-border-medium: #4b5563;
  }
}

/* ============================================
   UTILITY CLASSES
   Quick access to colors
   ============================================ */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-accent { color: var(--color-accent-purple) !important; }
.text-cyan { color: var(--color-accent-cyan) !important; }
.text-pink { color: var(--color-accent-pink) !important; }
.text-orange { color: var(--color-accent-orange) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-lightest) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent-purple) !important; }
.bg-cyan { background-color: var(--color-accent-cyan) !important; }
.bg-pink { background-color: var(--color-accent-pink) !important; }
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-gradient-vibrant { background: var(--gradient-vibrant) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-accent { border-color: var(--color-accent-purple) !important; }

/* ============================================
   ANIMATION COLORS
   For hover effects and transitions
   ============================================ */
.hover-primary:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  transition: all 0.3s ease;
}

.hover-accent:hover {
  background-color: var(--color-accent-purple-dark) !important;
  color: var(--color-white) !important;
  transition: all 0.3s ease;
}