/* Conscherry x Help Scout Docs: Light Mode */
:root {
  --cc-bitter-sweet: #fa625b;
  --cc-vermilion: #ff423b;
  --cc-light-green: #77dd77;
  --cc-mantis: #5ac05a;
  --cc-risd-blue: #5559fe;
  --cc-majorelle-blue: #484cf1;
  --cc-ultra-violet: #505179;
  --cc-delft-blue: #40405b;
  --cc-eerie-black: #201f1f;

  --cc-bg: #f6f8ff;
  --cc-surface: #ffffff;
  --cc-surface-tint: #f4f5ff;
  --cc-border: rgba(64, 64, 91, 0.16);
  --cc-text: #40405b;
  --cc-text-soft: #62658a;
  --cc-primary: #5559fe;
  --cc-primary-hover: #484cf1;
  --cc-success: #5ac05a;
  --cc-danger: #ff423b;
  --cc-focus: rgba(85, 89, 254, 0.35);
  --cc-radius-sm: 10px;
  --cc-radius-md: 14px;
  --cc-pill: 999px;
}

html,
body,
#wrapper,
#content,
.content,
.content-wrapper,
.portal,
.portal-container,
.site,
.layout,
.main,
.main-content {
  background: var(--cc-bg) !important;
  color: var(--cc-text) !important;
  font-family: Montserrat, Inter, Segoe UI, Roboto, Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.portal-title,
.article-title,
.hero-title {
  color: var(--cc-delft-blue) !important;
  font-family: "Barlow Semi Condensed", Montserrat, Inter, Segoe UI, sans-serif !important;
  letter-spacing: 0.01em;
}

p,
li,
small,
label,
.meta,
.byline,
.timestamp,
.text-muted,
.muted,
.subtitle {
  color: var(--cc-text-soft) !important;
}

a {
  color: var(--cc-primary) !important;
}

a:hover,
a:focus {
  color: var(--cc-primary-hover) !important;
}

.header,
.navbar,
.navbar-default,
.topbar,
.portal-header,
.fd-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--cc-border) !important;
}

.header a,
.navbar a,
.topbar a,
.portal-header a,
.navbar-brand,
.brand-name {
  color: var(--cc-delft-blue) !important;
}

.hero,
.hero-unit,
.kb-home,
.portal-home,
.homepage,
.kb-landing,
.welcome-wrapper,
.search-hero {
  background: transparent !important;
}

.search-box,
.search-wrap,
.portal-search,
.kb-search,
.hero-search,
.search-area {
  background: transparent !important;
}

.search-box input,
.search-wrap input,
.portal-search input,
.kb-search input,
input[type="search"],
input[type="text"],
textarea,
select,
.form-control {
  background: #ffffff !important;
  color: var(--cc-text) !important;
  border: 1px solid rgba(85, 89, 254, 0.35) !important;
  border-radius: var(--cc-pill) !important;
  box-shadow: 0 0 0 0 transparent !important;
}

.search-box input:focus,
.search-wrap input:focus,
.portal-search input:focus,
.kb-search input:focus,
input[type="search"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--cc-primary) !important;
  box-shadow: 0 0 0 3px var(--cc-focus) !important;
  outline: none !important;
}

.search-box button,
.search-wrap button,
.portal-search button,
.kb-search button,
.btn-primary,
button.btn-primary,
input[type="submit"],
.button-primary {
  background: var(--cc-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--cc-primary) !important;
  border-radius: var(--cc-pill) !important;
  font-weight: 600 !important;
}

.search-box button:hover,
.search-wrap button:hover,
.portal-search button:hover,
.kb-search button:hover,
.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover,
.button-primary:hover {
  background: var(--cc-primary-hover) !important;
  border-color: var(--cc-primary-hover) !important;
}

.btn,
button,
input[type="button"] {
  border-radius: var(--cc-pill) !important;
}

.card,
.panel,
.tile,
.widget,
.well,
.category-box,
.kb-category,
.article-category,
.section-box,
.list-group-item,
.article,
.article-container,
.article-content,
.article-body,
.content-panel,
.sidebar,
.sidebar-module {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-md) !important;
  color: var(--cc-text) !important;
  box-shadow: none !important;
}

.card:hover,
.panel:hover,
.tile:hover,
.category-box:hover,
.kb-category:hover,
.article-category:hover,
.list-group-item:hover {
  border-color: rgba(85, 89, 254, 0.52) !important;
  background: var(--cc-surface-tint) !important;
}

.article,
.article-container,
.article-content,
.article-body,
.content-panel {
  background: #ffffff !important;
}

.article *,
.article-content *,
.article-body * {
  color: var(--cc-text) !important;
}

.article p,
.article li,
.article-content p,
.article-content li,
.article-body p,
.article-body li {
  color: var(--cc-text-soft) !important;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--cc-delft-blue) !important;
}

.article a,
.article-content a,
.article-body a,
.article-list a,
.kb-list a,
.category-list a {
  color: var(--cc-primary) !important;
}

.article a:hover,
.article-content a:hover,
.article-body a:hover,
.article-list a:hover,
.kb-list a:hover,
.category-list a:hover {
  color: var(--cc-primary-hover) !important;
}

.badge,
.tag,
.label,
.status,
.chip {
  background: #eef0ff !important;
  border: 1px solid rgba(64, 64, 91, 0.18) !important;
  border-radius: var(--cc-pill) !important;
  color: var(--cc-delft-blue) !important;
}

.badge-success,
.status-open,
.label-success {
  background: rgba(90, 192, 90, 0.14) !important;
  border-color: rgba(90, 192, 90, 0.32) !important;
  color: #2b6f2b !important;
}

.badge-danger,
.status-closed,
.label-danger,
.text-danger {
  background: rgba(255, 66, 59, 0.12) !important;
  border-color: rgba(255, 66, 59, 0.28) !important;
  color: #a82f2a !important;
}

.footer,
.portal-footer,
footer {
  background: #ffffff !important;
  border-top: 1px solid var(--cc-border) !important;
  color: var(--cc-text-soft) !important;
}

*:focus-visible {
  outline: 2px solid var(--cc-focus) !important;
  outline-offset: 2px !important;
}
