/* Automatic time-based colour themes.
   Light uses the existing base design unchanged. */

html[data-theme="dusk"] {
  color-scheme: dark;
  --paper: #302a31;
  --paper-deep: #39323a;
  --paper-light: #423944;
  --ink: #f2ece4;
  --ink-soft: #c9c0c6;
  --line: #625763;
  --mineral: #c4a99b;
  --mineral-deep: #e0c8b8;
  --night: #1d1a1f;
  --night-soft: #29242b;
  --night-line: #554b57;
  --white-soft: #f5efe8;
  --shadow: 0 24px 60px rgba(9, 7, 10, 0.28);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161917;
  --paper-deep: #1d211e;
  --paper-light: #242925;
  --ink: #f1eee7;
  --ink-soft: #bec6be;
  --line: #39413b;
  --mineral: #a8b4aa;
  --mineral-deep: #d3ddd5;
  --night: #0d100e;
  --night-soft: #151a16;
  --night-line: #303831;
  --white-soft: #f3f0e8;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

html[data-theme="dusk"] body::before {
  opacity: 0.13;
  mix-blend-mode: soft-light;
}

html[data-theme="dark"] body::before {
  opacity: 0.09;
  mix-blend-mode: soft-light;
}

html[data-theme="dusk"] .skip-link,
html[data-theme="dark"] .skip-link,
html[data-theme="dusk"] .site-footer,
html[data-theme="dark"] .site-footer {
  background: var(--night);
  color: var(--white-soft);
}

html[data-theme="dusk"] .section-dark,
html[data-theme="dark"] .section-dark {
  background: var(--night);
}

html[data-theme="dusk"] .work-profile-image {
  filter: saturate(0.72) contrast(1.02) brightness(0.9);
}

html[data-theme="dark"] .work-profile-image {
  filter: saturate(0.62) contrast(1.05) brightness(0.8);
}

html[data-theme="dusk"] .contact-whatsapp-icon,
html[data-theme="dark"] .contact-whatsapp-icon {
  fill: currentColor;
  filter: none;
}

/* Keep the navigation available while the page scrolls. */
html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}

main section[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  transform: translateX(-50%);
  background: var(--paper);
  pointer-events: none;
  z-index: -1;
}

/* Keep the primary conversation action as a link, not a boxed button. */
.site-nav .nav-cta {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: opacity 180ms ease;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  background: transparent;
  color: inherit;
  opacity: 0.72;
}

@media (max-width: 900px) {
  .site-nav .nav-cta {
    align-self: flex-start;
    margin-top: 18px;
    padding: 0;
    border: 0;
    text-align: left;
  }
}

@media (prefers-contrast: more) {
  html[data-theme="dusk"],
  html[data-theme="dark"] {
    --line: currentColor;
  }
}