/* Shared surfaces. The original light palette stays the default. */
:root {
  color-scheme: light;
  --workflow-bg: #eef1ff;
  --workflow-border: #dbe1ff;
  --card-bg: #fff;
  --card-border: #d5dbef;
  --diagram-muted: #616d95;
  --connector: #8b9ddf;
  --tag-border: #dce1ee;
  --brand-fill: #2949eb;
  --cta-bg: #181b22;
  --cta-ink: #fff;
  --cta-hover: #2949eb;
  --cta-hover-ink: #fff;
  --approach-bg: #191d26;
}

/* Explicit selection takes precedence over the operating system. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e131c;
  --ink: #eef1f8;
  --muted: #b4bdcf;
  --blue: #a3b5ff;
  --line: #323c4e;
  --soft: #18202d;
  --workflow-bg: #161f32;
  --workflow-border: #354665;
  --card-bg: #202b40;
  --card-border: #455571;
  --diagram-muted: #b0bfdf;
  --connector: #7389bd;
  --tag-border: #536582;
  --brand-fill: #2945c7;
  --cta-bg: #dce5ff;
  --cta-ink: #151e32;
  --cta-hover: #b9c9ff;
  --cta-hover-ink: #151e32;
  --approach-bg: #171e2b;
}

/* Also works with JavaScript disabled, and tracks live system changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e131c;
    --ink: #eef1f8;
    --muted: #b4bdcf;
    --blue: #a3b5ff;
    --line: #323c4e;
    --soft: #18202d;
    --workflow-bg: #161f32;
    --workflow-border: #354665;
    --card-bg: #202b40;
    --card-border: #455571;
    --diagram-muted: #b0bfdf;
    --connector: #7389bd;
    --tag-border: #536582;
    --brand-fill: #2945c7;
    --cta-bg: #dce5ff;
    --cta-ink: #151e32;
    --cta-hover: #b9c9ff;
    --cta-hover-ink: #151e32;
    --approach-bg: #171e2b;
  }
}

::selection { color: #181b22; }
.brand-symbol { background: #181b22; border: 1px solid #657089; }
.button-dark, .skip-link { background: var(--cta-bg); color: var(--cta-ink); }
.button-dark:hover { background: var(--cta-hover); color: var(--cta-hover-ink); }
.button-lime, .result-icon { color: #181b22; }
.workflow { background: var(--workflow-bg); border-color: var(--workflow-border); }
.flow-sources > span, .flow-result { background: var(--card-bg); border-color: var(--card-border); }
.flow-core, .contact-section { background: var(--brand-fill); }
.flow-sources i, .diagram-index, .diagram-caption { color: var(--diagram-muted); }
.flow-lines span, .flow-lines span:first-child, .flow-lines span:last-child,
.flow-lines span:nth-child(2), .flow-down, .flow-down:after { border-color: var(--connector); }
.result-tags span { color: var(--diagram-muted); border-color: var(--tag-border); }
.service-number, .technology-note, .technology-note > span:first-child { color: var(--muted); }
.approach-section { background: var(--approach-bg); }

.site-footer { flex-wrap: wrap; }
.theme-control { display: flex; align-items: center; gap: 10px; }
.theme-control[hidden] { display: none; }
.theme-control label { color: var(--muted); font-size: .875rem; }
.theme-control select {
  font: inherit;
  font-size: .875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
}
.theme-control select:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (forced-colors: active) {
  .theme-control select:focus-visible { outline-color: Highlight; }
}