:root {
  color-scheme: dark;

  /* Sampled from the original E3 Capital logo. */
  --brand-blue: #92c1d3;
  --brand-gold: #b3ab6d;
  --brand-slate: #3f4d5a;

  --bg: #101a24;
  --panel: #182734;
  --surface: #20313e;
  --surface-muted: #15232f;
  --header: #101a24ee;
  --text: #edf3f7;
  --muted: #b2c3ce;
  --accent: var(--brand-blue);
  --gold: var(--brand-gold);
  --heading-start: #e4f0f6;
  --button: var(--brand-blue);
  --button-hover: #b1d5e2;
  --button-text: #132632;
  --line: #92c1d33b;
  --control-line: #6d879a;
  --focus: var(--gold);
  --blue-wash: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  --gold-wash: color-mix(in srgb, var(--brand-gold) 11%, transparent);
  --grid-line: #92c1d318;
  --selection: color-mix(in srgb, var(--accent) 17%, var(--panel));
  --shadow: 0 12px 30px #050c1538;

  /* Photographs and diagrams use a dark frame in both themes. */
  --art-bg: #111c28;
  --art-text: #eaf3f8;
  --art-muted: #bbcfda;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fa;
  --panel: #fff;
  --surface: #e7f0f5;
  --surface-muted: #eef3f6;
  --header: #f5f8faf2;
  --text: #243541;
  --muted: var(--brand-slate);
  --accent: #285c73;
  --gold: #746528;
  --heading-start: var(--brand-slate);
  --button: #285c73;
  --button-hover: #326981;
  --button-text: #fff;
  --line: #c8d7df;
  --control-line: #7a91a1;
  --grid-line: #3f4d5a14;
  --shadow: 0 12px 30px #3f4d5a1a;
}

.theme-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -12px;
  color: var(--text);
}
.theme-control > svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.theme-control::after {
  position: absolute;
  right: 10px;
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
  content: "";
}
.theme-control select {
  appearance: none;
  min-height: 36px;
  padding: 6px 22px 6px 30px;
  border: 1px solid var(--control-line);
  border-radius: 30px;
  background: var(--panel);
  color: inherit;
  font: 600 .75rem/1.3 "DM Sans", sans-serif;
  cursor: pointer;
}
.theme-control select:hover { border-color: var(--accent); }
.theme-control select:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (max-width: 1280px) {
  header { gap: 12px; padding-inline: 3%; }
  header nav { gap: 12px; }
  .theme-control { margin-left: 0; }
}
@media (max-width: 920px) {
  header { height: 76px; padding-inline: 5%; }
  header nav {
    position: absolute;
    inset: 76px 0 auto;
    display: none;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100dvh - 76px);
    overflow: auto;
    padding: 25px 5%;
    background: var(--panel);
    font-size: 1rem;
    box-shadow: 0 10px 25px #0005;
  }
  header nav.open { display: flex; }
  header .languages { margin-left: auto; }
  header .menu-toggle { display: block; }
}
@media (max-width: 440px) {
  header { gap: 8px; padding-inline: 4%; }
  header .languages { padding-inline: 3px; }
  header .languages button { padding-inline: 5px; }
  .theme-control select { padding-left: 25px; padding-right: 18px; }
  .theme-control > svg { left: 7px; width: 13px; height: 13px; }
  .theme-control::after { right: 8px; }
}

@media (max-width: 360px) {
  header { gap: 6px; padding-inline: 3%; }
  header .menu-toggle { padding-inline: 5px; }
}

/* Keep photo overlays and the 3D panels readable in either theme. */
.portfolio-overlay {
  --text: var(--art-text);
  --accent: var(--brand-blue);
  --muted: var(--art-muted);
  color: var(--text);
}
.art-label { color: var(--art-text); }

:root[data-theme="light"] header { box-shadow: 0 8px 28px #3f4d5a12; }
:root[data-theme="light"] :is(.dimension-card, .item-news, .testimonial-item, .lightbox-link, .ev-system) {
  box-shadow: var(--shadow);
}
:root[data-theme="light"] :is(.dimension-card:hover, .portfolio-item-1:hover, .team-item-1:hover, .item-news:hover, .lightbox-link:hover) {
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .dimension-scene {
  background: radial-gradient(ellipse at center, #354e60, var(--art-bg));
}