/* Ketabbin 3.6.4 — replace every inherited green surface with navy/blue. */
:root {
	--surface-2: #dce2e5;
	--text: #102b3a;
	--muted: #66747d;
	--line: rgba(16, 43, 58, .17);
	--kb-emerald: #173f5c;
	--kb-emerald-bright: #2c6f98;
	--kb-balanced-green: #1e5778;
	--commerce-green: #246889;
	--kb-shine-jade: #3b7090;
	--kb-magic-jade: #367493;
	--success: #2d6f91;
}

html[data-theme="dark"] {
	--paper: #061827;
	--surface: #081e2e;
	--surface-2: #0d2638;
	--commerce-card: #091f31;
	--commerce-warm: #102a3d;
	--text: #f2eadb;
	--muted: #a5b1ba;
	--line: rgba(242, 169, 0, .18);
	--line-strong: rgba(242, 169, 0, .52);
	--kb-midnight: #061827;
	--kb-balanced-night: #061827;
	--kb-emerald: #174968;
	--kb-emerald-bright: #4385aa;
	--kb-balanced-green: #286889;
	--commerce-green: #4a8fb4;
	--kb-shine-jade: #4b86a8;
	--kb-magic-jade: #4a89aa;
	--shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] body::before {
	background:
		linear-gradient(135deg, rgba(3, 14, 27, .78), rgba(6, 24, 39, .9)),
		var(--kb-library-image) center / cover no-repeat !important;
}

html[data-theme="dark"] .kb-commerce-notice {
	background: linear-gradient(100deg, #041321, #0b263a 55%, #041321) !important;
}

html[data-theme="dark"] .kb-commerce-header.kb-header {
	background: color-mix(in srgb, var(--surface) 97%, transparent) !important;
	box-shadow: 0 5px 18px rgba(0, 8, 18, .28) !important;
}

/* The primary footer is deliberately navy in both light and dark themes. */
.kb-commerce-footer,
.kb-footer {
	--surface: #081e2e;
	--surface-2: #0d2638;
	--text: #f2eadb;
	--muted: #a5b1ba;
	--line: rgba(242, 169, 0, .2);
	color: var(--text);
	background:
		radial-gradient(circle at 19% 13%, rgba(45, 102, 139, .2), transparent 25rem),
		linear-gradient(135deg, #041321, #0b263a 58%, #051522) !important;
	box-shadow: 0 -16px 50px rgba(0, 9, 20, .24) !important;
}

.kb-footer-main a:not(.kb-footer-logo),
.kb-footer-main p,
.kb-footer-main .kb-newsletter > small,
.kb-footer-bottom { color: var(--muted); }

/* Large fantasy modules that previously shipped with fixed emerald gradients. */
.kb-epub-commerce {
	background:
		radial-gradient(circle at 78% 30%, rgba(55, 117, 154, .2), transparent 18rem),
		linear-gradient(125deg, #071b2a, #0d304a 62%, #071827) !important;
}

.kb-member-hero,
.kb-auth-visual {
	background:
		radial-gradient(circle at 28% 19%, rgba(231, 182, 84, .16), transparent 19rem),
		linear-gradient(135deg, #071b2a, #0b2e47 64%, #061827) !important;
}

html[data-theme="dark"] :is(
	.kb-story-rail,
	.kb-quick-links,
	.kb-category-mega,
	.kb-dashboard-card,
	.kb-account-nav,
	.kb-chat,
	.kb-chat__rooms,
	.kb-chat__side,
	.kb-mobile-store-nav
) {
	background-color: var(--surface);
}

html[data-theme="dark"] :is(.kb-chat__rooms, .kb-chat__side, .kb-account-nav) {
	background-color: var(--surface-2);
}

/* Blue replaces green status and availability marks across commerce and account UI. */
.kb-live-dot,
.kb-account-nav__avatar i,
.kb-member-reading__saved i {
	background: #3f82a8 !important;
	box-shadow: 0 0 0 7px rgba(63, 130, 168, .13);
}

.kb-wc-system-page__header li.is-complete i {
	border-color: #2c6f98 !important;
	background: #2c6f98 !important;
}

.kb-quick-spark:nth-child(even) {
	background: #3c7fa5 !important;
	box-shadow: 0 0 7px #3c7fa5 !important;
}

.kb-member-icon-action b { border-color: var(--surface) !important; }

.kb-hero-slider__controls button {
	background: rgba(7, 27, 44, .9) !important;
}

.kb-product-fulfillment svg,
.kb-purchase-box > header small {
	color: #4a8fb4 !important;
	stroke: #4a8fb4 !important;
}

html[data-theme="dark"] .kb-purchase-box > header small { color: #76afd0 !important; }

/* Magical shine keeps its movement, but its secondary color is now blue. */
.kb-wand-aura {
	background: radial-gradient(circle, rgba(255, 229, 155, .2) 0, rgba(239, 193, 94, .12) 22%, rgba(55, 117, 154, .07) 46%, transparent 72%);
}

html[data-theme="light"] .kb-wand-aura {
	background: radial-gradient(circle, rgba(241, 189, 71, .19) 0, rgba(44, 111, 152, .09) 34%, transparent 70%);
}

.kb-commerce-header.kb-header::after {
	background: linear-gradient(90deg, transparent 0 10%, rgba(183, 126, 35, .45) 22%, var(--kb-shine-gold) 36%, var(--kb-shine-cream) 43%, var(--kb-shine-gold) 49%, rgba(59, 112, 144, .68) 62%, transparent 78% 100%) !important;
}

.kb-commerce-nav-wrap::after {
	background: linear-gradient(90deg, transparent 0 15%, rgba(59, 112, 144, .56) 27%, var(--kb-shine-gold) 42%, var(--kb-shine-cream) 49%, var(--kb-shine-gold) 55%, transparent 78% 100%);
}

:is(.kb-story-rail, .kb-quick-links, .kb-offer-section, .kb-category-showcase, .kb-product-section, .kb-service-strip)::after {
	background: linear-gradient(90deg, transparent, rgba(59, 112, 144, .5), var(--kb-shine-gold), var(--kb-shine-cream), var(--kb-shine-gold), transparent);
}

.kb-wand-dust { box-shadow: 0 0 6px rgba(239, 197, 107, .95), 5px -4px 0 -1px rgba(60, 127, 165, .86); }
.kb-wand-dust:nth-of-type(2n) { box-shadow: 0 0 6px rgba(60, 127, 165, .92), -4px 3px 0 -1px rgba(239, 197, 107, .8); }
.kb-spell-seal { box-shadow: 0 0 0 5px rgba(239, 197, 107, .07), 0 0 17px rgba(60, 127, 165, .22); }
.kb-spell-seal::after { border-color: rgba(60, 127, 165, .82); }
.kb-floating-book::after { text-shadow: -17px 18px 0 rgba(60, 127, 165, .8), 7px 35px 0 rgba(239, 197, 107, .45), 0 0 7px rgba(239, 197, 107, .8); }

@media (max-width: 700px) {
	html[data-theme="dark"] .kb-mobile-store-nav {
		border-top-color: rgba(232, 183, 91, .44) !important;
		background: #071b2c !important;
		box-shadow: 0 -7px 24px rgba(0, 7, 18, .38) !important;
	}

	html[data-theme="dark"] :is(.kb-commerce-actions .kb-menu-toggle, .kb-commerce-actions .kb-account-link, .kb-category-toggle) {
		background: linear-gradient(145deg, #102f46, #071b2c) !important;
	}

	html[data-theme="dark"] .kb-commerce-actions .kb-cart-link > span {
		border-color: #071b2c !important;
		background: #2c6f98 !important;
	}

	html[data-theme="light"] .kb-commerce-search > span,
	html[data-theme="light"] .kb-category-toggle .kb-fantasy-icon { color: #1e5878 !important; }

	html[data-theme="light"] .kb-commerce-search:focus-within { border-color: #2c6f98 !important; }
	html[data-theme="light"] .kb-commerce-actions .kb-cart-link > span { background: #1e5878 !important; }
}

@media (prefers-contrast: more) {
	html[data-theme="dark"] {
		--line: rgba(242, 169, 0, .3);
		--line-strong: rgba(242, 169, 0, .72);
	}
}