html {
  color-scheme: light;
  font-size: 14px;
}

body.metronic-body {
  background: var(--sp-app-bg);
  color: var(--sp-text-secondary);
  font-family: var(--sp-font-sans);
  font-size: var(--sp-font-size-md);
  font-weight: var(--sp-font-normal);
  line-height: 1.55;
}

.sp-skip-link {
  position: fixed;
  z-index: 2000;
  top: var(--sp-space-2);
  left: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: var(--sp-radius-sm);
  color: #fff;
  background: var(--sp-navy-950);
  box-shadow: var(--sp-shadow-md);
  text-decoration: none;
  transform: translateY(-160%);
}

.sp-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

h1, h2, h3, h4, h5, h6,
.page-heading {
  color: var(--sp-text-primary);
  letter-spacing: -.018em;
}

h1 {
  font-size: 24px;
  font-weight: var(--sp-font-semibold);
  line-height: 32px;
}

h2 {
  font-size: 18px;
  font-weight: var(--sp-font-semibold);
  line-height: 28px;
}

h3 {
  font-size: 16px;
  font-weight: var(--sp-font-semibold);
  line-height: 24px;
}

p,
li,
td,
th {
  text-wrap: pretty;
}

small,
.small {
  font-size: var(--sp-font-size-sm);
  line-height: 16px;
}

.sp-overline {
  color: var(--sp-slate-400);
  font-size: 10px;
  font-weight: var(--sp-font-semibold);
  line-height: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

input,
button,
select,
textarea {
  font-family: inherit;
}

a {
  transition: color var(--sp-transition), background-color var(--sp-transition), border-color var(--sp-transition);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--sp-radius-sm);
  outline: 2px solid var(--sp-blue-600);
  outline-offset: 2px;
}

::selection {
  background: rgba(37, 99, 235, .18);
}

.text-primary {
  color: var(--sp-blue-600) !important;
}

.text-secondary,
.text-muted,
.text-gray-600 {
  color: var(--sp-text-secondary) !important;
}

.text-gray-800 {
  color: var(--sp-text-primary) !important;
}