/* Black & White Theme for IndMon Website */
/* Clean, Modern, Professional Design */

:root {
    /* Grayscale Palette */
    --black: #000000;
    --gray-900: #0A0A0A;
    --gray-800: #1A1A1A;
    --gray-750: #252525;
    --gray-700: #2A2A2A;
    --gray-650: #333333;
    --gray-600: #3A3A3A;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;
    
    /* Professional Gradients */
    --gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #000000 50%, #0f0f0f 75%, #000000 100%);
    --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 25%, #ffffff 50%, #f1f3f4 75%, #ffffff 100%);
    --gradient-diagonal: linear-gradient(45deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    --gradient-radial: radial-gradient(circle at center, #1a1a1a 0%, #000000 70%);
    --gradient-mesh: conic-gradient(from 0deg at 50% 50%, #000000 0deg, #1a1a1a 90deg, #000000 180deg, #0f0f0f 270deg, #000000 360deg);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/* Professional Background Patterns */
.bg-gradient-vibrant,
.bg-gradient-sunrise,
.bg-gradient-sunset,
.bg-gradient-ocean,
.bg-gradient-forest,
.bg-gradient-rainbow,
.bg-gradient-india {
    background: var(--gradient-dark) !important;
    position: relative;
}

/* Add subtle animated background pattern */
.bg-gradient-vibrant::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
    animation: subtleShift 15s infinite linear;
    pointer-events: none;
}

@keyframes subtleShift {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    33% {
        transform: translateX(2px) translateY(-1px) scale(1.01);
    }
    66% {
        transform: translateX(-1px) translateY(2px) scale(0.99);
    }
}

/* Hero sections with enhanced gradients */
section[class*="bg-gradient"] {
    background: var(--gradient-dark) !important;
    position: relative;
}

/* Add mesh pattern for visual interest */
section[class*="bg-gradient"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    opacity: 0.4;
    pointer-events: none;
    animation: meshMove 20s infinite linear;
}

@keyframes meshMove {
    0% {
        background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    }
    100% {
        background-position: 60px 60px, 60px 90px, 90px 30px, 30px 60px;
    }
}

/* Enhanced white sections */
.bg-white {
    background: var(--gradient-light) !important;
    position: relative;
}

.bg-white::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.015) 0%, transparent 50%);
    pointer-events: none;
}

/* Professional card backgrounds */
.card-hover {
    background: var(--white) !important;
    position: relative;
    overflow: hidden;
}

.card-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(0, 0, 0, 0.02) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.card-hover:hover::before {
    transform: translateX(100%);
}

/* Enhanced Card Styles */
.card-orange,
.card-pink,
.card-cyan,
.card-green,
.card-yellow,
.card-lime {
    background: var(--white) !important;
    border-left: 4px solid var(--black) !important;
    position: relative;
    overflow: hidden;
}

.card-orange::after,
.card-pink::after,
.card-cyan::after,
.card-green::after,
.card-yellow::after,
.card-lime::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--black) 50%, transparent 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.card-orange:hover::after,
.card-pink:hover::after,
.card-cyan:hover::after,
.card-green:hover::after,
.card-yellow:hover::after,
.card-lime:hover::after {
    transform: scaleX(1);
}

/* Professional Button Styles */
.btn-orange-vivid,
.btn-pink-vivid,
.btn-cyan-vivid,
.btn-rainbow {
    background: linear-gradient(135deg, var(--black) 0%, var(--gray-800) 50%, var(--black) 100%) !important;
    color: var(--white) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gray-700);
    transition: all 0.3s ease;
}

.btn-orange-vivid::before,
.btn-pink-vivid::before,
.btn-cyan-vivid::before,
.btn-rainbow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-orange-vivid:hover,
.btn-pink-vivid:hover,
.btn-cyan-vivid:hover,
.btn-rainbow:hover {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-700) 50%, var(--gray-800) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 
        var(--shadow-xl),
        0 0 0 1px var(--gray-600),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-orange-vivid:hover::before,
.btn-pink-vivid:hover::before,
.btn-cyan-vivid:hover::before,
.btn-rainbow:hover::before {
    transform: translateX(100%);
}

.btn-orange-vivid:active,
.btn-pink-vivid:active,
.btn-cyan-vivid:active,
.btn-rainbow:active {
    transform: translateY(0);
    box-shadow: var(--shadow-inner);
}

/* Enhanced Icon Backgrounds */
.icon-bg-orange,
.icon-bg-pink,
.icon-bg-cyan,
.icon-bg-green,
.icon-bg-yellow,
.icon-bg-lime {
    background: linear-gradient(135deg, var(--black) 0%, var(--gray-800) 100%) !important;
    color: var(--white) !important;
    border: 1px solid var(--gray-700);
    position: relative;
    transition: all 0.3s ease;
}

.icon-bg-orange::after,
.icon-bg-pink::after,
.icon-bg-cyan::after,
.icon-bg-green::after,
.icon-bg-yellow::after,
.icon-bg-lime::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.icon-bg-orange:hover,
.icon-bg-pink:hover,
.icon-bg-cyan:hover,
.icon-bg-green:hover,
.icon-bg-yellow:hover,
.icon-bg-lime:hover {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-700) 100%) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--gray-600);
    transform: translateY(-1px);
}

/* Enhanced Text Colors */
.text-orange-vivid,
.text-pink-vivid,
.text-cyan-vivid,
.text-green-vivid,
.text-yellow-bright,
.text-lime-vivid {
    color: var(--black) !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Professional Shadows */
.shadow-orange,
.shadow-pink,
.shadow-cyan,
.shadow-green {
    box-shadow: 
        var(--shadow-xl),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Enhanced Borders */
[class*="border-orange"],
[class*="border-pink"],
[class*="border-cyan"],
[class*="border-green"] {
    border-color: var(--black) !important;
    position: relative;
}

[class*="border-orange"]::after,
[class*="border-pink"]::after,
[class*="border-cyan"]::after,
[class*="border-green"]::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    background: linear-gradient(45deg, var(--black), var(--gray-800)) border-box;
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* Enhanced Hover States */
[class*="hover:border-orange"]:hover,
[class*="hover:border-pink"]:hover,
[class*="hover:border-cyan"]:hover,
[class*="hover:text-orange"]:hover,
[class*="hover:text-pink"]:hover,
[class*="hover:text-cyan"]:hover {
    border-color: var(--gray-700) !important;
    color: var(--black) !important;
    transition: all 0.3s ease;
}

/* Override gradient text - keep it visible on dark backgrounds */
section[class*="bg-gradient"] .bg-clip-text {
    -webkit-text-fill-color: var(--white) !important;
    background-clip: text !important;
}

/* For light backgrounds */
section:not([class*="bg-gradient"]) .bg-clip-text {
    -webkit-text-fill-color: var(--black) !important;
    background-clip: text !important;
}

/* Clean white backgrounds */
.bg-white {
    background-color: var(--white) !important;
}

/* Clean gray backgrounds */
.bg-gray-50 {
    background-color: var(--gray-50) !important;
}

.bg-gray-100 {
    background-color: var(--gray-100) !important;
}

/* Text colors */
.text-white {
    color: var(--white) !important;
}

.text-gray-900 {
    color: var(--gray-900) !important;
}

.text-gray-800 {
    color: var(--gray-800) !important;
}

.text-gray-700 {
    color: var(--gray-700) !important;
}

.text-gray-600 {
    color: var(--gray-600) !important;
}

/* Remove colored backgrounds from specific elements */
[class*="bg-orange"],
[class*="bg-pink"],
[class*="bg-cyan"],
[class*="bg-green"],
[class*="bg-yellow"],
[class*="bg-lime"],
[class*="bg-blue"],
[class*="bg-purple"] {
    background-color: var(--gray-100) !important;
}

/* Remove all color overrides - let HTML classes work naturally */

/* Simple rule: text-white stays white, text-black stays black */
/* No complex overrides */

/* Card hover effects */
.card-hover:hover,
[class*="hover:shadow"]:hover {
    box-shadow: var(--shadow-2xl) !important;
}

/* Clean borders */
.border-gray-200 {
    border-color: var(--gray-200) !important;
}

/* Transition utilities removed: reverting to hard boundaries */

/* Mask-based fades removed */

/* Overlap gradients removed */

.border-gray-300 {
    border-color: var(--gray-300) !important;
}

/* Transparent backgrounds with backdrop blur */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure icons are visible */
/* Apply to final SVGs generated by Lucide as well */
[data-lucide],
.lucide {
    stroke-width: 2;
}