html[data-theme="dark"] {
	color-scheme: dark;
	--crypt-bg: #14181d;
	--crypt-ink: #d9dee5;
	--crypt-title: #f1f4f7;
	--crypt-muted: #9aa6b2;
	--crypt-nav: #202833;
	--crypt-link: #8fbce6;
	--crypt-card: #1d232b;
	--crypt-border: #333d49;
	--crypt-section: #252d37;
	--crypt-row-hover: #303a47;
	--crypt-accent: #66a7a7;
	--crypt-switcher-active-bg: #3a4654;
}

html[data-theme="dark"] body {
	background: var(--crypt-bg);
	color: var(--crypt-ink);
}

html[data-theme="dark"] a {
	color: var(--crypt-link);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: var(--crypt-title);
}

html[data-theme="dark"] .crypt-panel,
html[data-theme="dark"] .crypt-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .crypt-empty {
	background-color: var(--crypt-card);
	border-color: var(--crypt-border);
	color: var(--crypt-ink);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .btn-link.dropdown-item {
	color: var(--crypt-ink);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--crypt-row-hover);
	color: var(--crypt-ink);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .crypt-dictionary-entry,
html[data-theme="dark"] .dropdown-divider {
	border-color: var(--crypt-border);
}

html[data-theme="dark"] .crypt-notes {
	background: var(--crypt-section);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .crypt-header p,
html[data-theme="dark"] .crypt-entry-heading p,
html[data-theme="dark"] .crypt-example,
html[data-theme="dark"] .crypt-empty {
	color: var(--crypt-muted);
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-primary {
	background-color: var(--crypt-card);
	border-color: var(--crypt-border);
	color: var(--crypt-ink);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
	background-color: var(--crypt-section);
	border-color: var(--crypt-border);
	color: var(--crypt-ink);
}

html[data-theme="dark"] .crypt-theme-switcher {
	background: var(--crypt-card);
	border-color: var(--crypt-border);
}

html[data-theme="dark"] .crypt-theme-switcher .btn.is-active {
	background: var(--crypt-switcher-active-bg);
	color: var(--crypt-ink);
}