/* Shared color palette + utilities for DataCraft */
:root{
    --color-primary: #0e0f0f; /* blue-500 - bright blue */
    --color-primary-900: #1e40af; /* blue-900 - darker blue */
    --color-primary-600: #2563eb; /* blue-600 - medium blue */
    --color-secondary: #06B6D4; /* cyan - bright cyan */
    --color-accent: #F97316; /* orange */
    --color-success: #10B981; /* green */
    --color-warning: #F59E0B; /* amber */
    --color-surface-50: #f7fbfd;
    --color-surface-200: #edf2f7;
    --color-text-primary: #0f172a;
    --color-text-secondary: #718096;
}

.text-gradient { background: linear-gradient(90deg,var(--color-secondary),var(--color-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.text-primary { color: var(--color-primary); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-accent { color: var(--color-accent); }
.text-secondary { color: var(--color-secondary); }

.bg-primary { background-color: var(--color-primary); }
.bg-primary-900 { background-color: var(--color-primary-900); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-600 { background-color: #0891b2; }
.bg-accent { background-color: var(--color-accent); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-surface-50 { background-color: var(--color-surface-50); }
.bg-surface-200 { background-color: var(--color-surface-200); }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }

.btn-primary { background: var(--color-primary); color: #fff; border: none; }
.btn-primary:hover { background: var(--color-primary-900); }
.btn-secondary { background: var(--color-surface-200); color: var(--color-text-secondary); border: none; }

/* Color variants for Tailwind classes */
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-900); }
.bg-secondary-600 { background-color: #0891b2; } /* cyan-600 */
.border-primary { border-color: var(--color-primary); }
.border-primary-500 { border-color: var(--color-primary); }
.text-primary-300 { color: #93c5fd; } /* lighter blue */
.text-primary-600 { color: var(--color-primary-600); }

/* Hover states for buttons */
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }

/* Shadow utilities */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

.backdrop-card { background: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Gradient utilities */
.from-primary { --tw-gradient-from: var(--color-primary); }
.to-secondary { --tw-gradient-to: var(--color-secondary); }
.from-primary-600 { --tw-gradient-from: var(--color-primary-600); }
.to-secondary-600 { --tw-gradient-to: #0891b2; }
.hover\:from-primary-600:hover { --tw-gradient-from: var(--color-primary-600); }
.hover\:to-secondary-600:hover { --tw-gradient-to: #0891b2; }

/* Border utilities */
.border-primary { border-color: var(--color-primary); }
.border-primary-500 { border-color: var(--color-primary); }
.hover\:border-primary:hover { border-color: var(--color-primary); }
/* Navbar links - force white text */
header a,
nav a,
header span,
nav span {
    color: #ffffff !important;
}

/* Override hover states in navbar */
header a:hover,
nav a:hover {
    color: #3b82f6 !important;
}

/* Logo link - no background or padding style */
.flex-shrink-0 a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.flex-shrink-0 a span {
    color: #ffffff !important;
}

/* Small helpers */
.animate-fade-in { animation: fadeInUp .7s cubic-bezier(.2,.9,.2,1) both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in { animation: none; }
}