:root {
    /* Theme Variables - High Contrast Light */
    --navy-text: #0a192f;
    --slate-text: #334155;
    --ocean-blue: #0077b6;
    --glass-bg: rgba(255, 255, 255, 0.85);
    /* High opacity for readability */
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.1);
}

body {
    /* "Seashore" / "Coastline" Background */
    background: url('../images/seashore-bg.png') no-repeat center center fixed;
    background-size: cover;
    color: var(--slate-text);
    font-family: 'Inter', sans-serif;
}

/* --- Glassmorphism --- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
}

.glass-panel:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(2, 12, 27, 0.15);
}

/* --- Typography Overrides (Aggressive) --- */
/* Force all headings to Dark Navy */
/* Default Headings - Light for Dark Backgrounds */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    color: #f8fafc;
    /* Slate 50 */
}

/* Force Dark Headings ONLY inside White/Glass Panels */
.glass-panel h1,
.glass-panel h2,
.glass-panel h3,
.glass-panel h4,
.glass-panel h5,
.glass-panel h6,
.glass-panel .font-display {
    color: var(--navy-text) !important;
}

/* Force standard text to Slate 700 */
/* Default Body Text - Light Slate for Dark Backgrounds */
p,
li,
span,
div {
    color: #cbd5e1;
    /* Slate 300 */
}

/* Force Dark Body Text ONLY inside White/Glass Panels */
.glass-panel p,
.glass-panel li,
.glass-panel span,
.glass-panel div {
    color: var(--slate-text);
}

/* Override Legacy Dark Mode Classes */
/* This ensures <p class="text-slate-400"> becomes readable dark text */
/* Override Legacy Dark Mode Classes ONLY inside Glass Panels */
.glass-panel .text-white,
.glass-panel .text-slate-200,
.glass-panel .text-slate-300,
.glass-panel .text-slate-400,
.glass-panel .text-gray-300,
.glass-panel .text-gray-400 {
    color: #475569 !important;
    /* Slate 600 */
}

/* Remove this conflicting block as it's now handled by the scoped rule above */

/* --- Specific Element Overrides --- */

/* --- Aggressive Utility Class Inversion --- */
/* Problem: HTML has classes like 'text-slate-600' (dark) hardcoded. */
/* Solution: Invert them to Light globally (for dark bg), restore Dark inside cards. */

/* Global Inversion (Dark Backgrounds) */
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-slate-900,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-\[\#022c43\] {
    color: #e2e8f0 !important;
    /* Slate 200 (Light) */
}

/* Restore for Glass Panels (Light Backgrounds) */
.glass-panel .text-slate-400,
.glass-panel .text-gray-400 {
    color: #94a3b8 !important;
}

.glass-panel .text-slate-500,
.glass-panel .text-gray-500 {
    color: #64748b !important;
}

.glass-panel .text-slate-600,
.glass-panel .text-gray-600 {
    color: #475569 !important;
}

.glass-panel .text-slate-700,
.glass-panel .text-gray-700 {
    color: #334155 !important;
}

.glass-panel .text-slate-800,
.glass-panel .text-gray-800 {
    color: #1e293b !important;
}

.glass-panel .text-\[\#022c43\] {
    color: #022c43 !important;
}

/* --- Form Input Styling (Dark on Light) --- */
.glass-panel input,
.glass-panel select,
.glass-panel textarea {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.glass-panel input::placeholder,
.glass-panel select::placeholder,
.glass-panel textarea::placeholder {
    color: #94a3b8 !important;
}

/* --- Semi-Transparent Containers (Treat like Glass Panels) --- */
[class*="bg-white/"] h1,
[class*="bg-white/"] h2,
[class*="bg-white/"] h3,
[class*="bg-white/"] h4 {
    color: #0a192f !important;
}

[class*="bg-white/"] p,
[class*="bg-white/"] span,
[class*="bg-white/"] li {
    color: #334155 !important;
}

[class*="bg-white/"] .text-slate-600 {
    color: #475569 !important;
}

/* Keep 'text-white' white everywhere EXCEPT potentially inside light inputs (not handled here) */
.text-white {
    color: #ffffff !important;
}

#navbar {
    background: #000000;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: #ffffff !important;
    font-weight: 600;
}

.nav-link:hover {
    color: var(--ocean-blue) !important;
}

/* Footer - Keep it Dark for Design Anchor */
footer {
    background: #020c1b !important;
    /* Darkest Navy */
    color: #8892b0 !important;
}

/* Footer internals NEED to be light text again */
footer h1,
footer h2,
footer h3,
footer h4,
footer .font-display {
    color: white !important;
}

footer p,
footer li,
footer span,
footer a {
    color: #8892b0 !important;
    /* Light Slate */
}

footer .text-white {
    color: white !important;
}

footer .text-slate-400 {
    color: #8892b0 !important;
}

/* Buttons & Accents */
.text-\[\#64ffda\],
.text-cyan-400 {
    color: var(--ocean-blue) !important;
    /* Switch neon cyan to ocean blue */
}

/* Tables */
td,
th {
    border-color: #cbd5e1 !important;
    /* Slate 300 */
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-thumb {
    background: var(--ocean-blue);
    border-radius: 5px;
}

/* --- Final Polish --- */

/* Smooth Transitions for All Interactive Elements */
a,
button,
input,
select,
textarea,
.glass-panel {
    transition: all 0.3s ease;
}

/* Premium Link Styling */
a:not(.nav-link):not([class*="btn"]):not([class*="bg-"]) {
    color: #0077b6;
}

a:not(.nav-link):not([class*="btn"]):not([class*="bg-"]):hover {
    color: #005f93;
    text-decoration: underline;
}

/* CTA Button Glow Effect */
.glow-button:hover {
    box-shadow: 0 0 20px rgba(0, 119, 182, 0.4);
}

/* Improve Table Text Inside Glass Panels */
.glass-panel table {
    color: #334155 !important;
}

.glass-panel td,
.glass-panel th {
    color: #334155 !important;
}

/* Section Title Polish */
section h2:first-of-type {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Badge Styling (IoT Enabled, etc) */
[class*="bg-\\[\\#64ffda\\]"] {
    background-color: #64ffda !important;
    color: #0a192f !important;
}

/* Fix placeholder text in all inputs */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* --- Hero Section Fixes --- */
.hero-bg {
    background: url('../images/hero-bg.png') no-repeat center center;
    background-size: cover;
}

.hero-overlay {
    background: rgba(10, 25, 47, 0.7);
    /* Dark Navy Overlay */
    /* Optional: Gradient */
    background: linear-gradient(to bottom, rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0.6));
}