@font-face {
  font-family: "Hadlock Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
}

:root {
  --fonts-proportional:
    "Hadlock Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif !important;

  --hadlock-page: light-dark(#f4f1ea, #060a10);
  --hadlock-surface: light-dark(#fffefa, #0a1019);
  --hadlock-surface-hover: light-dark(#efece2, #0e1521);
  --hadlock-text: light-dark(#171716, #ffffff);
  --hadlock-text-secondary: light-dark(#3f3d37, #cbd5e1);
  --hadlock-muted: light-dark(#6b675e, #94a3b8);
  --hadlock-faint: light-dark(#8a867b, #64748b);
  --hadlock-border: light-dark(#d9d3c6, rgb(255 255 255 / 10%));
  --hadlock-border-strong: light-dark(#c9c3b7, rgb(255 255 255 / 20%));

  --color-primary: #0076a0;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #006b91;
  --color-primary-dark-2: #006082;
  --color-primary-dark-3: #00536f;
  --color-primary-dark-4: #00455d;
  --color-primary-dark-5: #00394d;
  --color-primary-dark-6: #002632;
  --color-primary-dark-7: #001218;
  --color-primary-light-1: #178dbf;
  --color-primary-light-2: #3aa8d4;
  --color-primary-light-3: #67c2e5;
  --color-primary-light-4: #91d4ef;
  --color-primary-light-5: #b9e4f5;
  --color-primary-light-6: #d9f2fb;
  --color-primary-light-7: #eefafe;
  --color-primary-alpha-10: rgb(0 118 160 / 10%);
  --color-primary-alpha-20: rgb(0 118 160 / 20%);
  --color-primary-alpha-30: rgb(0 118 160 / 30%);
  --color-primary-alpha-40: rgb(0 118 160 / 40%);
  --color-primary-alpha-50: rgb(0 118 160 / 50%);
  --color-primary-alpha-60: rgb(0 118 160 / 60%);
  --color-primary-alpha-70: rgb(0 118 160 / 70%);
  --color-primary-alpha-80: rgb(0 118 160 / 80%);
  --color-primary-alpha-90: rgb(0 118 160 / 90%);
  --color-primary-hover: light-dark(#006082, #178dbf);
  --color-primary-active: light-dark(#00536f, #3aa8d4);

  --color-secondary: light-dark(#d9d3c6, #293341);
  --color-secondary-button: light-dark(#6b675e, #cbd5e1);
  --color-secondary-hover: light-dark(#3f3d37, #ffffff);
  --color-secondary-active: light-dark(#171716, #ffffff);
  --color-body: var(--hadlock-page);
  --color-box-header: var(--hadlock-surface-hover);
  --color-box-body: var(--hadlock-surface);
  --color-box-body-highlight: light-dark(#f8f5ee, #0e1521);
  --color-text-dark: var(--hadlock-text);
  --color-text: var(--hadlock-text);
  --color-text-light: var(--hadlock-text-secondary);
  --color-text-light-1: var(--hadlock-text-secondary);
  --color-text-light-2: var(--hadlock-muted);
  --color-text-light-3: var(--hadlock-faint);
  --color-footer: light-dark(rgb(255 254 250 / 90%), rgb(6 10 16 / 90%));
  --color-timeline: var(--hadlock-border);
  --color-input-text: var(--hadlock-text);
  --color-input-background: light-dark(
    rgb(255 254 250 / 78%),
    rgb(10 16 25 / 72%)
  );
  --color-input-border: var(--hadlock-border-strong);
  --color-input-toggle-background: light-dark(#d9d3c6, #293341);
  --color-light: light-dark(rgb(23 23 22 / 4%), rgb(255 255 255 / 5%));
  --color-light-border: var(--hadlock-border);
  --color-hover: light-dark(rgb(23 23 22 / 6%), rgb(255 255 255 / 7%));
  --color-hover-opaque: var(--hadlock-surface-hover);
  --color-active: light-dark(rgb(0 118 160 / 10%), rgb(0 118 160 / 16%));
  --color-menu: var(--hadlock-surface);
  --color-card: var(--hadlock-surface);
  --color-markup-table-row: light-dark(
    rgb(0 118 160 / 4%),
    rgb(255 255 255 / 4%)
  );
  --color-markup-code-block: light-dark(#efece2, #0e1521);
  --color-markup-code-inline: light-dark(#e5e0d5, #151c26);
  --color-button: var(--hadlock-surface);
  --color-code-bg: light-dark(#f8f5ee, #080d14);
  --color-shadow: light-dark(rgb(15 23 42 / 14%), rgb(0 0 0 / 42%));
  --color-shadow-opaque: light-dark(#d9d3c6, #000000);
  --color-secondary-bg: light-dark(#efece2, #151c26);
  --color-expand-button: light-dark(#d9f2fb, #153445);
  --color-placeholder-text: var(--hadlock-faint);
  --color-editor-line-highlight: var(--color-primary-alpha-20);
  --color-editor-selection: var(--color-primary-alpha-30);
  --color-project-column-bg: light-dark(#efece2, #0e1521);
  --color-caret: var(--hadlock-text);
  --color-reaction-bg: light-dark(rgb(23 23 22 / 5%), rgb(255 255 255 / 6%));
  --color-reaction-hover-bg: var(--color-primary-alpha-20);
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-nav-bg: light-dark(rgb(255 254 250 / 90%), rgb(6 10 16 / 88%));
  --color-nav-hover-bg: var(--hadlock-surface-hover);
  --color-nav-text: var(--hadlock-text);
  --color-secondary-nav-bg: light-dark(
    rgb(244 241 234 / 94%),
    rgb(10 16 25 / 94%)
  );
  --color-label-text: var(--hadlock-text);
  --color-label-bg: light-dark(rgb(107 103 94 / 18%), rgb(148 163 184 / 20%));
  --color-accent: light-dark(#0a8fc0, #3aa8d4);
  --color-small-accent: light-dark(#d9f2fb, #153445);

  accent-color: #0076a0;
}

html,
body {
  background: var(--hadlock-page);
  color: var(--hadlock-text);
  font-family: var(--fonts-proportional);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgb(0 118 160 / 35%);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid #0076a0 !important;
  outline-offset: 2px;
}

#navbar {
  min-height: 3.75rem;
  border-bottom: 1px solid var(--hadlock-border);
  background: var(--color-nav-bg);
  box-shadow: 0 8px 28px rgb(15 23 42 / 7%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

#navbar-logo {
  padding-inline: 0.9rem;
}

#navbar-logo img {
  content: url("/assets/img/hadlock-logo-blue.svg?v=20260827-1");
  width: 9.25rem !important;
  height: 2.125rem !important;
  max-width: none;
  object-fit: contain;
}

.ui.button,
.ui.label,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.dropdown,
.ui.menu {
  border-radius: 0.375rem !important;
}

.ui.button {
  font-family: var(--fonts-proportional);
  font-weight: 600;
}

.ui.primary.button,
.ui.primary.buttons .button {
  border-color: #0076a0 !important;
  background: #0076a0 !important;
  color: #ffffff !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  border-color: var(--color-primary-hover) !important;
  background: var(--color-primary-hover) !important;
}

.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card {
  border-color: var(--hadlock-border) !important;
}

.ui.card,
.ui.cards > .card,
.ui.modal {
  border-radius: 0.75rem !important;
  box-shadow: 0 16px 42px var(--color-shadow) !important;
}

.page-content.user.signin,
.page-content.user.signup,
.page-content.user.forgot,
.page-content.user.reset {
  background-image:
    linear-gradient(rgb(244 241 234 / 18%), rgb(244 241 234 / 34%)),
    url("/assets/img/hadlock-pond-light.webp?v=20260827-1");
  background-position: center;
  background-size: cover;
}

.page-content.user.signin > .ui.grid,
.page-content.user.signup > .ui.grid,
.page-content.user.forgot > .ui.grid,
.page-content.user.reset > .ui.grid {
  min-height: calc(100vh - 7.5rem);
  padding: 3.5rem 1rem;
  align-items: center;
}

.page-content.user .ui.grid > .column {
  width: min(100%, 34rem) !important;
}

.page-content.user .ui.top.attached.header {
  padding: 1.25rem 2rem;
  border-color: var(--hadlock-border) !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  background: light-dark(
    rgb(239 236 226 / 88%),
    rgb(14 21 33 / 88%)
  ) !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.page-content.user .ui.attached.segment {
  padding: 2rem;
  border-color: var(--hadlock-border) !important;
  background: light-dark(
    rgb(255 254 250 / 90%),
    rgb(10 16 25 / 86%)
  ) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.page-content.user .ui.top.attached.header + .ui.attached.segment {
  border-radius: 0 0 0.75rem 0.75rem !important;
  box-shadow: 0 24px 64px var(--color-shadow);
}

.page-content.user .ui.container.fluid + .ui.container.fluid .ui.segment {
  border-radius: 0.75rem !important;
  text-align: center;
}

.page-content.user .ui.form .field > label,
.page-content.user .ui.form .field .tw-flex > label {
  margin-bottom: 0.375rem;
  color: var(--hadlock-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

.page-content.user .ui.form input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hadlock-border-strong) !important;
  background: var(--color-input-background) !important;
  box-shadow: none !important;
}

.page-content.user
  .ui.form
  input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: rgb(0 118 160 / 60%) !important;
  box-shadow: 0 0 0 2px rgb(0 118 160 / 20%) !important;
}

.page-content.user .external-login-link {
  border: 1px solid var(--hadlock-border-strong) !important;
  background: light-dark(
    rgb(255 254 250 / 62%),
    rgb(10 16 25 / 48%)
  ) !important;
}

.page-content.user .external-login-link .svg {
  display: none;
}

.page-content.user .external-login-link::before {
  width: 1.5rem;
  height: 1.5rem;
  background: url("/assets/img/hadlock-icon-blue.svg?v=20260827-1") center /
    contain no-repeat;
  content: "";
}

.page-footer {
  border-top: 1px solid var(--hadlock-border);
  background: var(--color-footer);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme*="auto"] #navbar-logo img,
  html:not([data-theme]) #navbar-logo img {
    content: url("/assets/img/hadlock-logo-white.svg?v=20260827-1");
  }

  html[data-theme*="auto"] .page-content.user.signin,
  html[data-theme*="auto"] .page-content.user.signup,
  html[data-theme*="auto"] .page-content.user.forgot,
  html[data-theme*="auto"] .page-content.user.reset {
    background-image:
      linear-gradient(rgb(6 10 16 / 48%), rgb(6 10 16 / 66%)),
      url("/assets/img/hadlock-pond.webp?v=20260827-1");
  }

  html[data-theme*="auto"] .page-content.user .external-login-link::before {
    background-image: url("/assets/img/hadlock-icon-white.svg?v=20260827-1");
  }
}

html[data-theme*="dark"] #navbar-logo img {
  content: url("/assets/img/hadlock-logo-white.svg?v=20260827-1");
}

html[data-theme*="dark"] .page-content.user.signin,
html[data-theme*="dark"] .page-content.user.signup,
html[data-theme*="dark"] .page-content.user.forgot,
html[data-theme*="dark"] .page-content.user.reset {
  background-image:
    linear-gradient(rgb(6 10 16 / 48%), rgb(6 10 16 / 66%)),
    url("/assets/img/hadlock-pond.webp?v=20260827-1");
}

html[data-theme*="dark"] .page-content.user .external-login-link::before {
  background-image: url("/assets/img/hadlock-icon-white.svg?v=20260827-1");
}

html[data-theme*="light"] #navbar-logo img {
  content: url("/assets/img/hadlock-logo-blue.svg?v=20260827-1");
}

@media (max-width: 48rem) {
  #navbar-logo img {
    content: url("/assets/img/hadlock-icon-blue.svg?v=20260827-1");
    width: 2rem !important;
    height: 2rem !important;
  }

  html[data-theme*="dark"] #navbar-logo img {
    content: url("/assets/img/hadlock-icon-white.svg?v=20260827-1");
  }

  .page-content.user .ui.attached.segment {
    padding: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 48rem) {
  html[data-theme*="auto"] #navbar-logo img,
  html:not([data-theme]) #navbar-logo img {
    content: url("/assets/img/hadlock-icon-white.svg?v=20260827-1");
  }
}

@media (prefers-reduced-transparency: reduce) {
  #navbar,
  .page-footer,
  .page-content.user .ui.top.attached.header,
  .page-content.user .ui.attached.segment {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #navbar,
  .page-footer {
    background: light-dark(#fffefa, #060a10);
  }

  .page-content.user .ui.top.attached.header {
    background: light-dark(#efece2, #0e1521) !important;
  }

  .page-content.user .ui.attached.segment {
    background: light-dark(#fffefa, #0a1019) !important;
  }
}