:root {
  color-scheme: dark;
  --primary-color: #7f5af0;
  --primary-hover-color: #6c47d3;
  --secondary-color: #2cb67d;
  --tertiary-color: #ffc107;
  --quaternary-color: #dc3545;
  --background-color: #16161a;
  --card-background-color: #242629;
  --panel-background-color: #16161a;
  --text-color: #fffffe;
  --text-muted-color: #94a1b2;
  --border-color: #43454a;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --heading-font: "Comfortaa", cursive;
  --body-font: "Open Sans", sans-serif;
  --success-color: #2cb67d;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --bg0: #16161a;
  --bg1: #101014;
  --card: rgba(255, 255, 255, 0.06);
  --card2: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke2: rgba(255, 255, 255, 0.18);
  --txt: #fffffe;
  --muted: #94a1b2;
  --a: #7f5af0;
  --b: #2cb67d;
  --c: #2cb67d;
  --warn: #ffc107;
  --danger: #dc3545;
}

html,
body {
  background: var(--background-color) !important;
  color: var(--text-color) !important;
}

body {
  font-family: var(--body-font);
}

body::before {
  background-image: none !important;
  animation: none !important;
}

a,
.nav-link,
.navbar-brand {
  color: var(--primary-color) !important;
}

a:hover,
.nav-link:hover {
  color: var(--primary-hover-color) !important;
}

.navbar,
.topbar,
.global-sidebar-header,
.offcanvas-header {
  background: rgba(36, 38, 41, 0.94) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 8px 24px var(--shadow-color) !important;
}

.navbar {
  border-bottom: 2px solid var(--primary-color) !important;
}

.hero-tool,
.tool-header,
.header,
.app-header,
.boot-header {
  background: linear-gradient(135deg, rgba(22, 22, 26, 0.96), rgba(36, 38, 41, 0.98)) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

.hero-tool h1,
.tool-header h1,
.tool-header h2,
.brand h1,
.boot-header h1,
h1.display-4 {
  color: var(--primary-color) !important;
  letter-spacing: 0 !important;
}

p,
.lead,
.form-text,
.text-muted,
.brand p,
.boot-header p,
.boot-card p {
  color: var(--text-muted-color) !important;
}

.tool-container,
.info-card,
.result-card,
.card,
.panel,
.boot-card,
.schema-control-panel,
.validation-result-panel,
.upload-box,
.upload-section,
.preview-section,
.output-section,
.converter-section,
.settings-section,
.section-card,
.modal-content,
.list-group-item {
  background: var(--card-background-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
  box-shadow: 0 6px 20px var(--shadow-color) !important;
}

.card .card,
.tool-container .card,
.info-card .card {
  background: var(--panel-background-color) !important;
}

.offcanvas,
.global-sidebar,
.stella-tool-directory-drawer {
  background: var(--card-background-color) !important;
  color: var(--text-color) !important;
  border-color: var(--primary-color) !important;
}

.offcanvas-body h5,
.global-sidebar-content h5,
.stella-tool-directory-drawer h5,
.card h2,
.card h3,
.tool-container h5,
.info-card h5 {
  color: var(--secondary-color) !important;
  border-color: var(--border-color) !important;
  letter-spacing: 0 !important;
}

.offcanvas-body a,
.global-sidebar-content a,
.stella-tool-directory-drawer a {
  color: var(--text-muted-color) !important;
}

.offcanvas-body a:hover,
.offcanvas-body a.active,
.global-sidebar-content a:hover,
.global-sidebar-content a.active,
.stella-tool-directory-drawer a:hover,
.stella-tool-directory-drawer a.active {
  color: var(--primary-color) !important;
}

.stella-tools-directory-summary {
  background: rgba(127, 90, 240, 0.08) !important;
  border-color: rgba(127, 90, 240, 0.38) !important;
}

.global-sidebar-toggle {
  background: rgba(127, 90, 240, 0.14) !important;
  border: 1px solid rgba(127, 90, 240, 0.45) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}

.global-sidebar-toggle:hover {
  background: rgba(127, 90, 240, 0.24) !important;
  color: var(--primary-hover-color) !important;
}

.btn-primary,
button.primary,
.primary-button {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-color) !important;
}

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

.btn-success,
button.success {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: #07130d !important;
}

.btn-danger,
button.danger {
  background: var(--quaternary-color) !important;
  border-color: var(--quaternary-color) !important;
  color: var(--text-color) !important;
}

.btn-warning,
button.warning {
  background: var(--tertiary-color) !important;
  border-color: var(--tertiary-color) !important;
  color: #17130a !important;
}

.btn-outline-info,
.btn-outline-light,
.btn-outline-secondary,
button.secondary,
button:not(.btn-close):not(.btn-sidebar-toggle):not(.global-sidebar-toggle):not(.stella-tool-directory-button):not(.stella-tool-directory-drawer-close):not(.navbar-toggler):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.btn-secondary {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
}

.btn-secondary:hover {
  background: #249d6a !important;
  border-color: #249d6a !important;
  color: var(--text-color) !important;
}

input,
select,
textarea,
.form-control,
.form-select,
.CodeMirror,
pre,
code {
  background: var(--background-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.form-check-input {
  width: 1.15em !important;
  height: 1.15em !important;
  margin-top: 0.25em !important;
  background-color: #0b0b10 !important;
  border: 2px solid rgba(255, 255, 254, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65) !important;
  cursor: pointer;
}

.form-check-input:hover {
  border-color: var(--secondary-color) !important;
  box-shadow: 0 0 0 0.16rem rgba(44, 182, 125, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.65) !important;
}

.form-check-input:focus {
  border-color: var(--tertiary-color) !important;
  box-shadow: 0 0 0 0.18rem rgba(255, 193, 7, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.65) !important;
}

.form-check-input:checked {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: 0 0 0 0.13rem rgba(44, 182, 125, 0.28) !important;
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2307110d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 10 4 4 8-8'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked + .form-check-label {
  color: var(--secondary-color) !important;
  font-weight: 600;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  background: #111116 !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(127, 90, 240, 0.22) !important;
  color: var(--text-color) !important;
}

label,
.form-label,
th {
  color: var(--text-color) !important;
}

table,
.table,
.comparison-table {
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

td,
.table td,
.comparison-table td {
  color: var(--text-muted-color) !important;
  border-color: var(--border-color) !important;
}

.status-panel,
.schema-status,
.alert,
.toast,
.badge {
  border-color: var(--border-color) !important;
}

.status-panel.success,
.schema-status-info,
.alert-success {
  background: rgba(44, 182, 125, 0.1) !important;
  border-color: rgba(44, 182, 125, 0.45) !important;
}

.status-panel.warning,
.schema-status-warning,
.alert-warning {
  background: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.5) !important;
}

.status-panel.danger,
.schema-status-error,
.alert-danger {
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.55) !important;
}

hr,
.modal-header,
.modal-footer,
.nav-tabs,
.tab-content {
  border-color: var(--border-color) !important;
}

.nav-tabs .nav-link.active,
.tab-pane,
.dropdown-menu {
  background: var(--card-background-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

footer {
  background: var(--background-color) !important;
  color: var(--text-muted-color) !important;
  border-color: var(--border-color) !important;
}