:root {
  --primary: #1b6cc4;
  --secondary: #0a1628;
  --accent: #5fd0bf;
  --primary-fg: #ffffff;
  --body-fg: #172033;
  --body-bg: #f7f9fc;
  --body-quiet-color: #647084;
  --body-medium-color: #445067;
  --body-loud-color: #0a1628;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #0a1628;
  --header-link-color: #dce7f5;
  --breadcrumbs-fg: #d5e4f4;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #132b4c;
  --link-fg: #1b6cc4;
  --link-hover-color: #1156a2;
  --link-selected-fg: #0e9e8a;
  --hairline-color: #dfe5ee;
  --border-color: #cfd8e5;
  --error-fg: #b42318;
  --message-success-bg: #e9f8f4;
  --message-warning-bg: #fff7df;
  --message-error-bg: #fef0ee;
  --darkened-bg: #eef3f8;
  --selected-bg: #e8f1fb;
  --selected-row: #e9f8f4;
  --button-fg: #ffffff;
  --button-bg: #1b6cc4;
  --button-hover-bg: #1156a2;
  --default-button-bg: #0e9e8a;
  --default-button-hover-bg: #087c6d;
  --close-button-bg: #506079;
  --close-button-hover-bg: #344258;
  --delete-button-bg: #ba2f3a;
  --delete-button-hover-bg: #98242e;
  --object-tools-fg: #ffffff;
  --object-tools-bg: #0e9e8a;
  --object-tools-hover-bg: #087c6d;
}

html[data-theme="dark"] {
  --primary: #75aaf0;
  --secondary: #0a1628;
  --accent: #68d5c5;
  --primary-fg: #08111f;
  --body-fg: #e6edf7;
  --body-bg: #111b2b;
  --body-quiet-color: #a4b0c2;
  --body-medium-color: #c3cddd;
  --body-loud-color: #ffffff;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #081321;
  --header-link-color: #dce7f5;
  --breadcrumbs-fg: #c6d8ec;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #132b4c;
  --link-fg: #75aaf0;
  --link-hover-color: #a8caff;
  --link-selected-fg: #68d5c5;
  --hairline-color: #2a3850;
  --border-color: #35455e;
  --error-fg: #ff9b91;
  --message-success-bg: #153b35;
  --message-warning-bg: #433816;
  --message-error-bg: #49262a;
  --darkened-bg: #182438;
  --selected-bg: #1d3150;
  --selected-row: #153b35;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --primary: #75aaf0;
    --secondary: #0a1628;
    --accent: #68d5c5;
    --primary-fg: #08111f;
    --body-fg: #e6edf7;
    --body-bg: #111b2b;
    --body-quiet-color: #a4b0c2;
    --body-medium-color: #c3cddd;
    --body-loud-color: #ffffff;
    --header-color: #ffffff;
    --header-branding-color: #ffffff;
    --header-bg: #081321;
    --header-link-color: #dce7f5;
    --breadcrumbs-fg: #c6d8ec;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #132b4c;
    --link-fg: #75aaf0;
    --link-hover-color: #a8caff;
    --link-selected-fg: #68d5c5;
    --hairline-color: #2a3850;
    --border-color: #35455e;
    --error-fg: #ff9b91;
    --message-success-bg: #153b35;
    --message-warning-bg: #433816;
    --message-error-bg: #49262a;
    --darkened-bg: #182438;
    --selected-bg: #1d3150;
    --selected-row: #153b35;
  }
}

body {
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#header {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 8px 24px rgb(10 22 40 / 16%);
}

#site-name a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--header-branding-color);
}

.talentbridge-brand {
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.talentbridge-admin-label {
  color: #9fb2ca;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

div.breadcrumbs {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.module,
.inline-group,
#changelist-filter,
.dashboard .module table {
  border-radius: 0.5rem;
  overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

input,
textarea,
select,
.button,
input[type="submit"],
input[type="button"],
.submit-row a.deletelink {
  border-radius: 0.5rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgb(14 158 138 / 35%);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  #site-name a {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }
}