:root {
  --brand-green: #5aa246;
  --brand-blue: #3479cf;
  --brand-dark: #111820;
  --brand-panel: #ffffff;

  --brand-muted: color-mix(in srgb, var(--brand-dark) 68%, var(--brand-panel));
  --brand-line: color-mix(in srgb, var(--brand-dark) 16%, var(--brand-panel));
  --brand-soft: color-mix(in srgb, var(--brand-blue) 5%, var(--brand-panel));
  --site-container-width: 1320px;
  --site-section-space: 72px;

  --bs-primary: var(--brand-green);
  --bs-secondary: var(--brand-blue);
  --bs-success: var(--brand-green);
  --bs-info: var(--brand-blue);
  --bs-warning: var(--brand-green);
  --bs-danger: var(--brand-blue);
  --bs-light: var(--brand-panel);
  --bs-dark: var(--brand-dark);
  --bs-body-color: var(--brand-muted);
  --bs-body-bg: var(--brand-panel);
  --bs-border-color: var(--brand-line);
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: var(--brand-green);
}

html {
  color-scheme: light;
}

body {
  color: var(--brand-muted);
  background: var(--brand-panel);
}

::selection {
  color: var(--brand-panel);
  background: var(--brand-blue);
}

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.form-control,
.form-select,
.dropdown-menu,
.accordion-item {
  color: var(--brand-dark);
  background-color: var(--brand-panel);
  border-color: var(--brand-line);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-blue) 18%, transparent);
}

.text-primary,
.text-success,
.text-warning {
  color: var(--brand-green) !important;
}

.text-secondary,
.text-info,
.text-danger {
  color: var(--brand-blue) !important;
}

.text-dark {
  color: var(--brand-dark) !important;
}

.text-light,
.text-white {
  color: var(--brand-panel) !important;
}

.bg-primary,
.bg-success,
.bg-warning,
.btn-primary,
.btn-success,
.btn-warning {
  border-color: var(--brand-green) !important;
  background-color: var(--brand-green) !important;
}

.bg-secondary,
.bg-info,
.bg-danger,
.btn-secondary,
.btn-info,
.btn-danger {
  border-color: var(--brand-blue) !important;
  background-color: var(--brand-blue) !important;
}

.bg-dark,
.btn-dark {
  border-color: var(--brand-dark) !important;
  background-color: var(--brand-dark) !important;
}

.bg-light,
.bg-white,
.btn-light {
  border-color: var(--brand-line) !important;
  background-color: var(--brand-panel) !important;
}

@media (max-width: 1199px) {
  :root {
    --site-section-space: 64px;
  }
}

@media (max-width: 991px) {
  :root {
    --site-section-space: 58px;
  }
}

@media (max-width: 767px) {
  :root {
    --site-section-space: 48px;
  }
}

@media (max-width: 480px) {
  :root {
    --site-section-space: 42px;
  }
}