:root[data-auth-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f6f1;
  --ink-soft: #112b22;
  --paper: #0c2f25;
  --white: #e8e7df;
  --muted: #aebbc0;
  --line: rgb(228 237 240 / 17%);
  --lime: #d7ff72;
  --lime-hover: #c8f45e;
  --danger: #9f2f28;
  --danger-soft: #fff0ed;
  --focus: #d7ff72;
}

:root[data-auth-theme="dark"],
:root[data-auth-theme="dark"] body {
  background-color: var(--paper);
}

:root[data-auth-theme="dark"] body {
  background-image:
    linear-gradient(rgb(234 241 237 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(234 241 237 / 4%) 1px, transparent 1px);
}

:root[data-auth-theme="dark"] .auth-header {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 2px;
  box-shadow: none;
}

:root[data-auth-theme="dark"] .brand img {
  filter: invert(1) brightness(1.18);
}

:root[data-auth-theme="dark"] .auth-footer,
:root[data-auth-theme="dark"] .current-version {
  color: #8fa298;
}

:root[data-auth-theme="dark"] .auth-form-panel {
  border-color: rgb(11 22 19 / 14%);
  background: #d1d8cf;
  color: #0b2018;
  box-shadow: 0 30px 72px -42px rgb(0 5 3 / 72%);
}

:root[data-auth-theme="dark"] .form-kicker {
  color: #17613d;
}

:root[data-auth-theme="dark"] .form-intro,
:root[data-auth-theme="dark"] .divider,
:root[data-auth-theme="dark"] .dev-fill,
:root[data-auth-theme="dark"] .form-signup-prompt,
:root[data-auth-theme="dark"] .signup-note {
  color: #58665e;
}

:root[data-auth-theme="dark"] .auth-signup-page .auth-form-panel h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 3.2vw, 3.55rem);
}

:root[data-auth-theme="dark"] .auth-signup-page .form-intro {
  margin-bottom: 22px;
}

:root[data-auth-theme="dark"] .auth-signup-page .divider {
  margin-block: 18px;
}

:root[data-auth-theme="dark"] .auth-signup-page .auth-form {
  gap: 14px;
}

:root[data-auth-theme="dark"] .divider::before,
:root[data-auth-theme="dark"] .divider::after {
  background: rgb(11 32 24 / 16%);
}

:root[data-auth-theme="dark"] .social-button {
  border-color: rgb(11 32 24 / 18%);
  background: #f7f6ef;
  color: #0b2018;
}

:root[data-auth-theme="dark"] .social-button:hover {
  border-color: rgb(11 32 24 / 36%);
  background: #eceee7;
}

:root[data-auth-theme="dark"] .field label {
  color: #263b31;
}

:root[data-auth-theme="dark"] .field-heading a {
  color: #17613d;
}

:root[data-auth-theme="dark"] .field input {
  border-color: rgb(11 32 24 / 22%);
  background: #f7f6ef;
  color: #0b2018;
}

:root[data-auth-theme="dark"] .field input::placeholder {
  color: #66736b;
}

:root[data-auth-theme="dark"] .field input:hover {
  border-color: rgb(11 32 24 / 38%);
}

:root[data-auth-theme="dark"] .field input:focus {
  border-color: #17613d;
  background: #fbfaf4;
  box-shadow: 0 0 0 3px rgb(23 97 61 / 14%);
}

:root[data-auth-theme="dark"] input:-webkit-autofill,
:root[data-auth-theme="dark"] input:-webkit-autofill:hover,
:root[data-auth-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f6ef inset;
  box-shadow: 0 0 0 1000px #f7f6ef inset;
  -webkit-text-fill-color: #0b2018;
}

:root[data-auth-theme="dark"] .submit-button {
  color: #112b22;
  box-shadow: 0 13px 30px rgb(14 50 35 / 14%);
}

:root[data-auth-theme="dark"] .dev-fill button {
  color: #9aaba2;
}

:root[data-auth-theme="dark"] .status-message {
  border-color: #9bc49e;
  background: #e9f5e6;
  color: #28543b;
}

:root[data-auth-theme="dark"] .error-message {
  border-color: #d6aaa4;
  background: var(--danger-soft);
  color: var(--danger);
}

:root[data-auth-theme="dark"] .auth-form-panel :where(a, button, input):focus-visible {
  outline-color: #17613d;
}

:root[data-auth-theme="dark"] .auth-layout {
  grid-template-columns: minmax(450px, 0.92fr) minmax(520px, 1.08fr);
}

:root[data-auth-theme="dark"] .auth-form-panel,
:root[data-auth-theme="dark"] .workspace-panel {
  min-height: 690px;
}

:root[data-auth-theme="dark"] .auth-form-panel {
  padding: clamp(40px, 3.5vw, 48px);
}

:root[data-auth-theme="dark"] .auth-form-panel h1 {
  margin-top: 14px;
  font-size: clamp(3.15rem, 3.5vw, 3.9rem);
}

:root[data-auth-theme="dark"] .workspace-panel {
  justify-content: flex-end;
  border: 0;
  background-color: #b8d7e6;
  /* Source supplied for the auth concept: https://5d-travel.com/eng/wp-content/uploads/2024/01/sarajevo.jpg */
  background-image:
    linear-gradient(180deg, rgb(4 17 13 / 0%) 48%, rgb(4 17 13 / 78%) 100%),
    url("/assets/sarajevo-daylight-auth.webp?v=3");
  background-position: center;
  background-size: cover;
  box-shadow: 0 30px 72px -42px rgb(0 5 3 / 72%);
}

:root[data-auth-theme="dark"] .workspace-panel::before,
:root[data-auth-theme="dark"] .workspace-board {
  display: none;
}

:root[data-auth-theme="dark"] .workspace-copy {
  width: min(100%, 440px);
  padding: 0;
  text-shadow: 0 2px 22px rgb(0 8 5 / 68%);
}

:root[data-auth-theme="dark"] .workspace-eyebrow {
  color: #b9caff;
}

:root[data-auth-theme="dark"] .workspace-copy h2 {
  max-width: 13ch;
  margin: 0 0 10px;
  font-size: clamp(2.15rem, 2.6vw, 2.75rem);
  font-weight: 600;
  line-height: 0.98;
  color: #f7f7f2;
}

:root[data-auth-theme="dark"] .workspace-copy > p,
:root[data-auth-theme="dark"] .scope-note {
  color: #53645b;
}

:root[data-auth-theme="dark"] .workspace-copy > p {
  max-width: 36rem;
  margin: 0;
  color: #e0e8e3;
  font-size: 0.86rem;
  line-height: 1.5;
}

:root[data-auth-theme="dark"] .form-signup-prompt a {
  color: #0b2018;
}

:root[data-auth-theme="dark"] [data-lang-btn] {
  color: #aebbc0;
}

:root[data-auth-theme="dark"] [data-lang-btn][aria-pressed="true"] {
  background: transparent;
  color: #f5f6f1;
  box-shadow: none;
  text-decoration-color: #d7ff72;
}

:root[data-auth-theme="dark"] .skip-link {
  border-color: var(--lime);
  background: #14262f;
  color: #f5f6f1;
}

@media (max-width: 820px) {
  :root[data-auth-theme="dark"] .auth-header,
  :root[data-auth-theme="dark"] .auth-footer,
  :root[data-auth-theme="dark"] .auth-layout {
    width: min(100%, 560px);
  }

  :root[data-auth-theme="dark"] .auth-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-auth-theme="dark"] .auth-form-panel {
    min-height: 0;
    padding: 38px 30px;
  }

  :root[data-auth-theme="dark"] .workspace-panel {
    display: none;
  }
}

@media (max-width: 560px) {
  :root[data-auth-theme="dark"] .auth-header {
    min-height: 52px;
    padding-inline: 4px;
  }

  :root[data-auth-theme="dark"] .auth-form-panel,
  :root[data-auth-theme="dark"] .workspace-panel {
    min-height: 0;
  }
}