@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
   THEME COLOR PALETTE (Change theme colors here in ONE place):
   Agar green ki jagah blue, orange ya koi bhi color karna ho, 
   bas niche diye gaye --theme-primary aur shades ko change karo, 
   puri website me ek sath change ho jayega!
*/
:root {
    --theme-primary: #059669;       /* Main Emerald 600 */
    --theme-primary-hover: #047857; /* Darker Emerald 700 */
    --theme-primary-light: #10b981; /* Lighter Emerald 500 */
    --theme-primary-bg: #ecfdf5;    /* Very soft tint Emerald 50 */
    --theme-primary-border: #a7f3d0;/* Border Emerald 200 */
    --theme-accent: #f59e0b;        /* Solar Gold 500 */
    --theme-accent-hover: #d97706;  /* Solar Gold 600 */
}

/* Dynamic Theme Utility Classes */
.bg-theme-primary { background-color: var(--theme-primary) !important; }
.hover\:bg-theme-primary:hover { background-color: var(--theme-primary) !important; }
.bg-theme-hover:hover { background-color: var(--theme-primary-hover) !important; }
.bg-theme-light { background-color: var(--theme-primary-light) !important; }
.bg-theme-soft { background-color: var(--theme-primary-bg) !important; }
.hover\:bg-theme-soft:hover { background-color: var(--theme-primary-bg) !important; }

.text-theme-primary { color: var(--theme-primary) !important; }
.hover\:text-theme-primary:hover { color: var(--theme-primary) !important; }
.text-theme-hover:hover { color: var(--theme-primary-hover) !important; }

.border-theme-primary { border-color: var(--theme-primary) !important; }
.border-theme-soft { border-color: var(--theme-primary-border) !important; }
.hover\:border-theme-primary:hover { border-color: var(--theme-primary) !important; }

/* Custom Solar Patterns & Grids */
.bg-solar-grid {
    background-size: 36px 36px;
    background-image: 
        linear-gradient(to right, rgba(5, 150, 105, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(5, 150, 105, 0.08) 1px, transparent 1px);
}

.bg-dot-pattern {
    background-image: radial-gradient(rgba(245, 158, 11, 0.18) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}