/* The primary portfolio shell has one palette in each theme. */
body.has-shared-shell {
  --shell-header: #fff;
  --shell-footer: #fff;
  --shell-text: #111113;
  --shell-muted: #57575b;
  --shell-border: #d1d1d4;
  --shell-control: #fff;
  --shell-control-border: #767676;
  --shell-active: #111113;
  --shell-active-text: #fff;
}

html[data-theme="dark"] body.has-shared-shell {
  --shell-header: #121215;
  --shell-footer: #171719;
  --shell-text: #f3f2ee;
  --shell-muted: #aaa9a5;
  --shell-border: #333337;
  --shell-control: #121215;
  --shell-control-border: #8b8b91;
  --shell-active: #f3f2ee;
  --shell-active-text: #111113;
}

#portfolio-site-header {
  background: var(--shell-header);
  border: 1px solid var(--shell-border);
  box-shadow: none;
  color: var(--shell-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#portfolio-site-header .brand__name {
  font-family: "Geologica", "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .9px;
  color: var(--shell-text);
}

#portfolio-site-header .brand__role { color: var(--shell-muted); }
#portfolio-site-header .site-nav a { color: var(--shell-text); }

#portfolio-site-header .menu-toggle span,
#portfolio-site-header .menu-toggle span::before,
#portfolio-site-header .menu-toggle span::after {
  background: var(--shell-text);
}

#portfolio-site-header .lang-switch__btn {
  background: var(--shell-control);
  border-color: var(--shell-control-border);
  color: var(--shell-text);
}

#portfolio-site-header .lang-switch__btn:is(.is-active, :hover) {
  background: var(--shell-active);
  border-color: var(--shell-active);
  color: var(--shell-active-text);
}

#portfolio-site-header :focus-visible {
  outline: 2px solid var(--shell-text);
  outline-offset: 3px;
}

.has-shared-shell #contact.site-footer {
  background: var(--shell-footer);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.has-shared-shell #contact.site-footer a { color: var(--shell-text); }
.has-shared-shell #contact.site-footer .footer-status { color: var(--shell-muted); }

@media (max-width: 700px) {
  #portfolio-site-header .site-actions {
    background: var(--shell-header);
    border-color: var(--shell-control-border);
    color: var(--shell-text);
  }
}