:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --clr-primary: #6da8e8;
  --clr-primary-light: #9ac5f2;
  --clr-accent: #f0b84a;
  --clr-accent-light: #ffd37a;
  --clr-bg: #08111d;
  --clr-surface: #101b2b;
  --clr-surface-2: #172437;
  --clr-text: #f4f7fb;
  --clr-text-muted: #b5c1d1;
  --clr-border: rgba(210, 224, 242, 0.16);
  --clr-nav-bg: rgba(8, 17, 29, 0.92);
  --clr-nav-menu-bg: rgba(16, 27, 43, 0.98);
  --clr-footer-bg: #06101c;
  --clr-field-bg: #0c1726;
  --clr-field-focus: #101b2b;
  --clr-hero-start: rgba(8, 17, 29, 0.9);
  --clr-hero-end: rgba(6, 16, 28, 0.96);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.24);
  --shadow-md: 0 10px 34px rgba(0,0,0,0.32);
  --shadow-lg: 0 24px 68px rgba(0,0,0,0.42);
  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --max-w: 1180px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --clr-primary: #1a3c5e;
  --clr-primary-light: #2a5f96;
  --clr-accent: #e8a020;
  --clr-accent-light: #f5bc4a;
  --clr-bg: #f8f9fc;
  --clr-surface: #ffffff;
  --clr-surface-2: #f0f4fa;
  --clr-text: #111827;
  --clr-text-muted: #6b7280;
  --clr-border: #e5e7eb;
  --clr-nav-bg: rgba(255,255,255,0.92);
  --clr-nav-menu-bg: rgba(255,255,255,0.98);
  --clr-footer-bg: #0d2236;
  --clr-field-bg: #f8f9fc;
  --clr-field-focus: #ffffff;
  --clr-hero-start: rgba(26, 60, 94, 0.9);
  --clr-hero-end: rgba(13, 34, 54, 0.95);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(26,60,94,0.10);
  --shadow-lg: 0 20px 60px rgba(26,60,94,0.15);
}

body,
nav#navbar,
.nav-dropdown-menu,
.nav-links,
.content-inner,
.blog-article,
.share-bar,
.sidebar-card,
.back-to-blog,
.theme-toggle {
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

nav#navbar { background: var(--clr-nav-bg); }
.nav-dropdown-menu { background: var(--clr-nav-menu-bg); }
footer { background: var(--clr-footer-bg); }
.page-hero { background: linear-gradient(var(--clr-hero-start), var(--clr-hero-end)), url('/imgs/hero-bg.png') center/cover no-repeat; }
.content-inner,
.blog-article,
.share-bar,
.sidebar-card,
.back-to-blog { background: var(--clr-surface); }
.form-group input,
.form-group textarea,
.contact-form select { background: var(--clr-field-bg); }
.form-group input:focus,
.form-group textarea:focus,
.contact-form select:focus { background: var(--clr-field-focus); }

:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .contact-form-card select {
  background: var(--clr-field-bg);
  color: var(--clr-text);
}

:root[data-theme="dark"] .form-group input:focus,
:root[data-theme="dark"] .form-group textarea:focus,
:root[data-theme="dark"] .form-group select:focus,
:root[data-theme="dark"] .contact-form-card select:focus {
  background: var(--clr-field-focus) !important;
  color: var(--clr-text);
  border-color: var(--clr-primary-light);
  box-shadow: 0 0 0 3px rgba(109, 168, 232, 0.18);
}

:root[data-theme="dark"] .form-group input::placeholder,
:root[data-theme="dark"] .form-group textarea::placeholder {
  color: rgba(181, 193, 209, 0.68);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-surface-2);
  color: var(--clr-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--clr-primary-light);
  border-color: var(--clr-primary-light);
  transform: translateY(-1px);
}

.theme-toggle i {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: inline-block; }

@media (max-width: 900px) {
  nav#navbar .nav-links,
  .nav-links { background: var(--clr-nav-menu-bg); }

  .theme-toggle {
    margin: 8px 24px;
    width: calc(100% - 48px);
    border-radius: var(--radius-sm);
  }
}

:root[data-theme="dark"] .blog-article-body p,
:root[data-theme="dark"] .blog-article-body li {
  color: var(--clr-text-muted);
}

:root[data-theme="dark"] #services {
  background: #0d1a2a;
}

:root[data-theme="dark"] .service-card {
  background: #07111e;
  border-color: rgba(210, 224, 242, 0.18);
}

:root[data-theme="dark"] .service-card:hover {
  background: #142236 !important;
  border-color: rgba(109, 168, 232, 0.42);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(240, 184, 74, 0.12);
}

:root[data-theme="dark"] .service-icon {
  background: rgba(109, 168, 232, 0.14);
  border: 1px solid rgba(109, 168, 232, 0.26);
  color: var(--clr-primary-light);
}

:root[data-theme="dark"] .service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-light));
  border-color: transparent;
  color: #07111e;
}

:root[data-theme="dark"] .service-card:hover .service-name {
  color: var(--clr-primary-light);
}

:root[data-theme="dark"] .service-card:hover .service-desc {
  color: #d7e2ef;
}

:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"] {
  background: var(--clr-surface) !important;
}

:root[data-theme="dark"] [style*="color: #374151"],
:root[data-theme="dark"] [style*="color:#374151"],
:root[data-theme="dark"] [style*="color: #111827"],
:root[data-theme="dark"] [style*="color:#111827"] {
  color: var(--clr-text-muted) !important;
}