html[data-theme="light"] {
	color-scheme: light;
	--crypt-bg: #f4f6f8;
	--crypt-ink: #333333;
	--crypt-title: #333333;
	--crypt-muted: #777777;
	--crypt-nav: #2f4050;
	--crypt-link: #337ab7;
	--crypt-card: #ffffff;
	--crypt-border: #d8dde3;
	--crypt-section: #f5f5f5;
	--crypt-row-hover: #eef0f2;
	--crypt-accent: #2f6f73;
	--crypt-switcher-active-bg: #d8dde3;
}

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

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

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

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

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

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

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

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

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