:root {
    --bg-main: #f8fafc; /* slate-50 */
    --bg-nav: #ffffff;
    --bg-section: #ffffff;
    --bg-section-alt: #f1f5f9; /* slate-100 */
    --text-primary: #0f172a; /* slate-900 */
    --text-secondary: #475569; /* slate-600 */
    --text-muted: #64748b; /* slate-500 */
    --border-color: #e2e8f0; /* slate-200 */
    --card-bg: #ffffff;
    --form-bg: #f8fafc;
    --input-bg: #ffffff;
}

html[data-theme="dark"] {
    --bg-main: #0f172a;
    --bg-nav: #1e293b;
    --bg-section: #1e293b;
    --bg-section-alt: #0f172a;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --card-bg: #1e293b;
    --form-bg: #1e293b;
    --input-bg: #0f172a;
}

/* ----- Base overrides ----- */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ----- Navigation ----- */
nav {
    background-color: var(--bg-nav) !important;
    transition: background-color 0.25s ease;
}

nav .text-slate-800,
nav .text-2xl {
    color: var(--text-primary) !important;
}

nav ul a,
nav .text-slate-600 {
    color: var(--text-secondary) !important;
}

#theme-toggle {
    color: var(--text-secondary) !important;
}

/* ----- Sections ----- */
#about,
#products,
#contact,
section.bg-white,
section.bg-slate-50 {
    background-color: var(--bg-section) !important;
    transition: background-color 0.25s ease;
}

#drawings,
#location {
    background-color: var(--bg-section-alt) !important;
    transition: background-color 0.25s ease;
}

/* ----- Typography ----- */
.text-slate-900 {
    color: var(--text-primary) !important;
}

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

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

.text-slate-500 {
    color: var(--text-muted) !important;
}

.text-slate-400 {
    color: var(--text-muted) !important;
}

/* Exception: white-bg buttons with dark text (e.g. hero CTA) must stay dark */
.bg-white.text-slate-900 {
    color: #0f172a !important;
}

/* ----- Product Cards ----- */
.group.border {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.group .bg-slate-100 {
    background-color: var(--bg-section-alt) !important;
    transition: background-color 0.25s ease;
}

button[data-product] {
    background-color: var(--bg-section-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transition: all 0.25s ease;
}

button[data-product]:hover {
    background-color: var(--border-color) !important;
}

/* ----- Drawings Table ----- */
#drawings .bg-white {
    background-color: var(--bg-section) !important;
}

table tbody tr:hover {
    background-color: rgba(30, 58, 95, 0.2) !important;
}

html[data-theme="dark"] table tbody tr:hover {
    background-color: #1e3a5f !important;
}

table tbody td {
    color: var(--text-primary) !important;
}

table tbody tr {
    border-color: var(--border-color) !important;
}

/* ----- Contact Section & Form ----- */
form.bg-slate-50 {
    background-color: var(--form-bg) !important;
    border-color: var(--border-color) !important;
}

form label {
    color: var(--text-primary) !important;
}

form input,
form textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transition: all 0.25s ease;
}

form input::placeholder,
form textarea::placeholder {
    color: var(--text-muted) !important;
}

form button.bg-slate-900 {
    background-color: #1e293b; /* slate-800 equivalent */
}

html[data-theme="dark"] form button.bg-slate-900 {
    background-color: #334155;
}

html[data-theme="dark"] form button.bg-slate-900:hover {
    background-color: #475569;
}

/* ----- Modal ----- */
#spec-modal > div {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#modal-title {
    color: var(--text-primary) !important;
}

#modal-content,
#modal-content p,
#modal-content li {
    color: var(--text-secondary) !important;
}

#modal-content h4 {
    color: var(--text-primary) !important;
}

#modal-close-button {
    color: var(--text-secondary) !important;
}

#modal-close-button:hover {
    color: var(--text-primary) !important;
}

/* ----- Location Section ----- */
#location .bg-white {
    background-color: var(--bg-nav) !important;
}

/* ----- Hero gradient ----- */
.gradient-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4));
}

/* ----- Smooth transitions ----- */
nav,
section,
.group.border,
form,
input,
textarea,
table,
#spec-modal > div {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}