/* Blue/Indigo Tech Theme - Professional Software Development Look */
:root {
    /* Tech Blue Palette (Trust, Modernity, Intelligence) */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    /* Standard Blue */
    --primary-600: #2563eb;
    /* Tech Blue Main */
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Base Colors */
    --bg-color: #ffffff;
    --text-color: #0f172a;
    /* slab-900 for sharper text */
    --text-muted: #475569;
    /* slab-600 */
    --card-bg: #ffffff;
    --section-bg: #f8fafc;
    /* slab-50 */
    --border-color: #e2e8f0;
    /* slab-200 */
}

/* Dark Mode Variables */
.dark {
    --bg-color: #020617;
    /* Very dark slate */
    --text-color: #f8fafc;
    /* slab-50 */
    --text-muted: #94a3b8;
    /* slab-400 */
    --card-bg: #0f172a;
    /* slab-900 */
    --section-bg: #020617;
    /* slab-950 */
    --border-color: #1e293b;
    /* slab-800 */

    --primary-50: #172554;
    --primary-100: #1e3a8a;
    --primary-500: #3b82f6;
    --primary-600: #60a5fa;
    /* Lighter blue for dark mode visibility */
}

/* Apply Variables */
html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* CRITICAL: Prevent horizontal scroll on mobile */
    width: 100%;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s, color 0.3s;
}

.bg-white {
    background-color: var(--card-bg) !important;
}

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

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

.text-gray-600,
.text-gray-500,
.text-gray-400 {
    color: var(--text-muted) !important;
}

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

/* Dark Mode Specific Tweaks */
.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Contact Form Input Styles for Dark Mode */
.dark input[type="text"],
.dark input[type="email"],
.dark textarea {
    background-color: #1e293b !important;
    /* slate-800 */
    color: #f1f5f9 !important;
    /* slate-100 */
    border-color: #334155 !important;
    /* slate-600 */
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b !important;
}

.dark input:focus,
.dark textarea:focus {
    border-color: var(--primary-500) !important;
}

/* Navbar Blur */
.scrolled-nav {
    background-color: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(16px);
}

.dark .scrolled-nav {
    background-color: rgba(2, 6, 23, 0.90) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 
   PRIMARY OVERRIDES 
   Mapping 'primary' classes to our Blue variables.
   Note: Removed 'red' overrides so Demos can use their own colors.
*/

/* Backgrounds */
.bg-primary-50,
.bg-blue-50 {
    background-color: var(--primary-50) !important;
}

.bg-primary-100,
.bg-blue-100 {
    background-color: var(--primary-100) !important;
}

.bg-primary-500,
.bg-blue-500 {
    background-color: var(--primary-500) !important;
}

.bg-primary-600,
.bg-blue-600 {
    background-color: var(--primary-600) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--primary-700) !important;
}

/* Text */
.text-primary-400,
.text-blue-400 {
    color: var(--primary-400) !important;
}

.text-primary-500,
.text-blue-500 {
    color: var(--primary-500) !important;
}

.text-primary-600,
.text-blue-600 {
    color: var(--primary-600) !important;
}

.text-primary-700,
.text-blue-700 {
    color: var(--primary-700) !important;
}

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

/* Gradients & Accents */
.text-gradient {
    background-image: linear-gradient(to right, var(--primary-600), #8b5cf6) !important;
    /* Blue to Purple gradient for modern look */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-600), #4f46e5) !important;
    /* Blue to Indigo */
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-500) !important;
}