/* Site-wide light/dark theme using CSS variables and gentle overrides */

:root {
  --bg: #f9fafb;           /* gray-50 */
  --text: #111827;         /* gray-900 */
  --muted: #4b5563;        /* gray-600 */
  --surface: #ffffff;      /* white */
  --surface-2: #f3f4f6;    /* gray-100 */
  --border: #e5e7eb;       /* gray-200/300 */
  --brand: #b91c1c;        /* red-700/900 mix */
  --bg-photo-tint: rgba(0, 0, 0, 0.08);
}

html.dark {
  --bg: #0b0f13;           /* near-black blue */
  --text: #e5e7eb;         /* gray-200 */
  --muted: #9ca3af;        /* gray-400 */
  --surface: #111827;      /* gray-900 */
  --surface-2: #0f172a;    /* slate-900 */
  --border: #334155;       /* slate-700 */
  --brand: #ef4444;        /* red-500 for contrast on dark */
  --bg-photo-tint: rgba(0, 0, 0, 0.5);
}

html { color-scheme: light dark; }

body {
  background-color: var(--bg);
  color: var(--text);
}

/* Keep red theme elements consistent */
hr { border-color: var(--brand); background-color: var(--brand); }

/* Background image sections: apply subtle tint via blend mode */
/* Index/services background: keep tint in both themes */
.mainbg {
  background-blend-mode: multiply;
  background-color: var(--bg-photo-tint);
}

/* Contact page background: original (no tint) in light mode, tinted only in dark mode */
.mainbg-contact {
  background-image: url(assets/bg1.jpg);
  background-position: center;
  background-size: cover;
}
html.dark .mainbg-contact {
  background-blend-mode: multiply;
  background-color: var(--bg-photo-tint);
}

/* Utility modifiers to fine-tune tint per section (apply alongside .mainbg or .mainbg-contact) */
.section-darken { --bg-photo-tint: rgba(0,0,0,0.65); }
.section-lighten { --bg-photo-tint: rgba(0,0,0,0.25); }
.section-none { --bg-photo-tint: rgba(0,0,0,0); }

/* Hero overlay opacity tweaks per theme */
.hero-overlay { opacity: 0.7; transition: opacity 200ms ease; }
html.dark .hero-overlay { opacity: 0.85; }

/* High-level container overrides in dark mode to reduce page-by-page edits */
html.dark .bg-gray-50,
html.dark .bg-white,
html.dark .bg-gray-100 { background-color: var(--surface) !important; }

html.dark nav { background-color: #111827 !important; color: var(--text) !important; }
html.dark .dropdown-menu { background-color: #111827 !important; }

/* Typography color adjustments when utilities pin light-theme grays */
html.dark .text-black,
html.dark .text-gray-900 { color: var(--text) !important; }
html.dark .text-gray-700 { color: #e5e7eb !important; }
html.dark .text-gray-600 { color: var(--muted) !important; }
html.dark .text-red-900 { color: var(--brand) !important; }

/* Borders and cards */
html.dark .border-gray-300 { border-color: var(--border) !important; }
html.dark .shadow-lg,
html.dark .shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important; }

/* Form controls */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* Explicit light-mode baseline for form controls to avoid accidental dark inheritance */
input,
textarea,
select {
  background-color: var(--surface);
  color: var(--text);
}
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 0.9; }

/* Autofill fix (WebKit) to prevent yellow or dark artifacts between themes */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  -webkit-text-fill-color: var(--text);
}

/* Links and subtle hover state in dark mode */
html.dark a { color: inherit; }
html.dark a:hover { color: #fb923c; /* orange-400-ish to match existing hover feel */ }

/* Theme toggle button minimal styling */
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; }
#theme-toggle:hover { background-color: rgba(0,0,0,0.06); }
html.dark #theme-toggle:hover { background-color: rgba(255,255,255,0.08); }

/* Ensure footer text stays readable on dark surfaces */
footer { color: #fff; }