/* Icon Color System for IndMon Website */
/* Maintains black & white theme while adding subtle colorful accents */

:root {
    /* Icon Color Palette */
    --icon-green: #10B981;      /* Emerald - Success, Check, Money, Growth */
    --icon-blue: #3B82F6;       /* Blue - Links, Info, Trust, Communication */
    --icon-amber: #F59E0B;      /* Amber - Stars, Ideas, Premium, Light */
    --icon-purple: #8B5CF6;     /* Purple - Innovation, Tech, Security */
    --icon-cyan: #06B6D4;       /* Cyan - Code, Development, Cool Tech */
    --icon-red: #EF4444;        /* Red - Bugs, Alerts, Important */
    --icon-pink: #EC4899;       /* Pink - Design, Creative, Modern */
    --icon-saffron: #FF9933;    /* Saffron - Indian/Swadeshi Theme */
    --icon-orange: #FF6B35;     /* Orange - Brand/CTA/Primary */
    --icon-gray: #6B7280;       /* Gray - Neutral actions */
    --icon-gold: #FBBF24;       /* Gold - Premium, Star ratings */
}

/* ========================================
   HERO SECTION ICONS
   ======================================== */

/* Success/Check Icons */
[data-lucide="check-circle"],
[data-lucide="check"] {
    color: var(--icon-green) !important;
}

/* User/Community Icons */
[data-lucide="users"],
[data-lucide="user-plus"] {
    color: var(--icon-blue) !important;
}

/* Star/Rating Icons */
[data-lucide="star"] {
    color: var(--icon-amber) !important;
}

/* Security/Shield Icons */
[data-lucide="shield"],
[data-lucide="shield-check"] {
    color: var(--icon-purple) !important;
}

/* ========================================
   NAVIGATION & CTA ICONS
   ======================================== */

/* Arrow/Navigation Icons */
[data-lucide="arrow-right"],
[data-lucide="arrow-left"],
[data-lucide="chevrons-right"] {
    color: var(--icon-orange) !important;
}

/* Phone/Contact Icons */
[data-lucide="phone"],
[data-lucide="phone-call"] {
    color: var(--icon-green) !important;
}

/* Email/Message Icons */
[data-lucide="mail"],
[data-lucide="message-circle"] {
    color: var(--icon-blue) !important;
}

/* Scroll Indicators */
[data-lucide="chevron-down"],
[data-lucide="chevron-up"] {
    color: var(--icon-gray) !important;
}

/* ========================================
   FEATURE SECTION ICONS
   ======================================== */

/* Indian/Swadeshi Icon */
[data-lucide="flag"] {
    color: var(--icon-saffron) !important;
}

/* Money/Rupee Icons */
[data-lucide="indian-rupee"],
[data-lucide="dollar-sign"] {
    color: var(--icon-green) !important;
}

/* Support/Help Icons */
[data-lucide="headphones"],
[data-lucide="help-circle"] {
    color: var(--icon-purple) !important;
}

/* Innovation/Ideas Icons */
[data-lucide="lightbulb"],
[data-lucide="zap"] {
    color: var(--icon-amber) !important;
}

/* Development/Code Icons */
[data-lucide="code"],
[data-lucide="code-2"],
[data-lucide="terminal"] {
    color: var(--icon-cyan) !important;
}

/* Launch/Rocket Icons */
[data-lucide="rocket"],
[data-lucide="send"] {
    color: var(--icon-purple) !important;
}

/* Design/Creative Icons */
[data-lucide="palette"],
[data-lucide="pen-tool"] {
    color: var(--icon-pink) !important;
}

/* Bug/Testing Icons */
[data-lucide="bug"],
[data-lucide="alert-triangle"] {
    color: var(--icon-red) !important;
}

/* ========================================
   PRODUCT SECTION ICONS
   ======================================== */

/* Download Icons */
[data-lucide="download"],
[data-lucide="cloud-download"] {
    color: var(--icon-gray) !important;
}

/* External Link Icons */
[data-lucide="external-link"],
[data-lucide="link"] {
    color: var(--icon-blue) !important;
}

/* ========================================
   CONTACT & FOOTER ICONS
   ======================================== */

/* NOTE: LinkedIn is rendered as an inline SVG (not a data-lucide icon) —
   Lucide dropped brand/logo icons in newer releases. Color is set inline
   via style="color: #0A66C2" wherever the icon is used. */

/* Smartphone/App Store Icons */
[data-lucide="smartphone"],
[data-lucide="tablet"] {
    color: var(--icon-green) !important;
}

/* Clock/Time Icons */
[data-lucide="clock"],
[data-lucide="calendar"] {
    color: var(--icon-amber) !important;
}

/* ========================================
   SPECIAL CASES - WHITE BACKGROUNDS
   ======================================== */

/* Icons on dark backgrounds should remain white (only direct children) */
.bg-black > [data-lucide],
.bg-black > .lucide,
.bg-gray-900 > [data-lucide],
.bg-gray-900 > .lucide,
.bg-gradient-to-br > [data-lucide],
.bg-gradient-to-br > .lucide {
    color: white !important;
}

/* Icons inside black boxes/containers */
.bg-black.inline-block [data-lucide],
.bg-black.inline-block .lucide,
.bg-black.p-3 [data-lucide],
.bg-black.p-3 .lucide,
.bg-black.p-4 [data-lucide],
.bg-black.p-4 .lucide {
    color: white !important;
}

/* Nested icons inside white chips will use their own text-* color classes by default */

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Add subtle glow on hover for colored icons */
[data-lucide]:not(.bg-black *):hover {
    filter: brightness(1.1);
    transition: all 0.3s ease;
}

/* ========================================
   FILLED STAR RATINGS
   ======================================== */

/* Star icons with fill-current class */
.fill-current[data-lucide="star"] {
    fill: var(--icon-gold);
    color: var(--icon-gold) !important;
}

/* Yellow star variations */
.text-yellow-500[data-lucide="star"] {
    color: var(--icon-gold) !important;
    fill: var(--icon-gold);
}

/* ========================================
   SIZE VARIATIONS
   ======================================== */

/* Maintain colors across all sizes */
.w-4[data-lucide],
.w-5[data-lucide],
.w-6[data-lucide],
.w-8[data-lucide] {
    /* Colors will inherit from parent rules */
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* On mobile, slightly increase contrast for better visibility */
@media (max-width: 768px) {
    [data-lucide] {
        filter: contrast(1.1);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Ensure sufficient contrast for accessibility */
@media (prefers-contrast: high) {
    [data-lucide] {
        filter: contrast(1.3);
    }
}

/* ========================================
   ANIMATION SUPPORT
   ======================================== */

/* Smooth color transitions */
[data-lucide] {
    transition: color 0.3s ease, filter 0.3s ease;
}

/* ========================================
   OVERRIDE EXCEPTIONS
   ======================================== */

/* Some icons should always stay black (specified with .text-black) */
.text-black[data-lucide] {
    color: #000000 !important;
}

/* Some icons should stay white (on colored backgrounds) */
.text-white[data-lucide] {
    color: #FFFFFF !important;
}

/* Icons in CTA buttons maintain their intended colors */
.bg-black.text-white [data-lucide],
button [data-lucide] {
    color: inherit !important;
}