:root,
[data-aio-theme] {
  --aio-banner-bg: #24272C;
  --aio-banner-text: #FFFFFF;
  --aio-page-bg: #F3F4F6;
  --aio-surface-bg: #FFFFFF;
  --aio-surface-alt-bg: #F9FAFB;
  --aio-border-color: #D9DEE7;
  --aio-text-color: #1F2937;
  --aio-muted-text-color: #6B7280;
  --aio-accent: #F97316;
  --aio-accent-hover: #CD5705;
  --aio-accent-soft: #F4F2F0;
  --aio-link-color: #C25000;
  --aio-focus-ring: rgba(249, 115, 22, 0.35);
  --aio-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --aio-font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --aio-font-nav: system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root,
[data-aio-theme] {
  --color-bg: var(--aio-page-bg);
  --color-surface: var(--aio-surface-bg);
  --color-text: var(--aio-text-color);
  --color-muted: var(--aio-muted-text-color);
  --color-border: var(--aio-border-color);
  --accent: var(--aio-accent);
  --font-family: var(--aio-font-body);
}

body {
  background-color: var(--aio-page-bg);
  color: var(--aio-text-color);
  font-family: var(--aio-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--aio-font-heading);
}

.aio-navbar {
  background-color: var(--aio-banner-bg) !important;
  color: var(--aio-banner-text);
  font-family: var(--aio-font-nav);
}

.aio-navbar .navbar-brand,
.aio-navbar .nav-link,
.aio-navbar .navbar-toggler,
.aio-navbar .burger-btn {
  color: var(--aio-banner-text) !important;
}

.aio-navbar .nav-link:hover,
.aio-navbar .nav-link:focus,
.aio-navbar .navbar-brand:hover,
.aio-navbar .navbar-brand:focus {
  color: var(--aio-banner-text) !important;
  opacity: 0.85;
}

.aio-navbar .navbar-toggler {
  border-color: var(--aio-banner-text);
}

.aio-navbar .navbar-toggler-icon {
  background-image: none;
  position: relative;
}

.aio-navbar .navbar-toggler-icon::before {
  content: "\f0c9";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--aio-banner-text);
}

.left-sidebar {
  background-color: var(--aio-surface-alt-bg);
  border-right-color: var(--aio-border-color);
}

.card,
.dropdown-menu {
  background-color: var(--aio-surface-bg);
  border-color: var(--aio-border-color);
}

.btn-primary {
  background-color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--aio-accent-hover) !important;
  border-color: var(--aio-accent-hover) !important;
}

.btn-outline-primary {
  color: var(--aio-accent) !important;
  border-color: var(--aio-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--aio-accent) !important;
  color: #fff !important;
}

.admin-sidebar .admin-nav-item.is-active,
.list-group-item.active,
.list-group-item-action.active,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--aio-accent-soft) !important;
  border-color: var(--aio-accent) !important;
  color: var(--aio-accent) !important;
}

.nav-tabs .nav-link.active,
.aio-tabs .nav-link.active {
  color: var(--aio-accent);
  border-bottom-color: var(--aio-accent);
}

a {
  color: var(--aio-link-color);
}

a:hover {
  color: var(--aio-accent-hover);
}

:focus,
:focus-visible {
  outline-color: var(--aio-focus-ring);
}