/**
 * Kumparan Dark Mode Stylesheet
 *
 * @package Kumparan
 */

[data-theme="dark"] {
	/* Neutral Palette (Dark Mode) */
	--bg-body: #121212;
	--bg-site: #181818;
	--bg-surface: #222222;
	--bg-card: #1E1E1E;
	--border-light: #2A2A2A;
	--border-subtle: #333333;
	--border-dark: #444444;

	/* Typography Colors */
	--text-primary: #F0F2F5;
	--text-secondary: #B0B3B8;
	--text-muted: #8A8D91;
	--text-light: #606770;
}

[data-theme="dark"] body {
	background-color: var(--bg-body);
	color: var(--text-primary);
}

/* Switch Logos in Dark Mode */
[data-theme="dark"] .kumparan-main-logo.logo-light {
	display: none;
}

[data-theme="dark"] .kumparan-main-logo.logo-dark {
	display: block;
}

/* Switch Moon and Sun icons */
[data-theme="dark"] .action-icon-btn .icon-moon {
	display: none;
}

[data-theme="dark"] .action-icon-btn .icon-sun {
	display: block;
	color: #FFD21E;
}

/* Search input in dark mode */
[data-theme="dark"] .kumparan-search-pill:focus-within {
	background-color: #222222;
}

/* Popover Modal in Dark Mode */
[data-theme="dark"] .kumparan-popover-modal {
	background-color: #1A1A1A;
	border-bottom-color: var(--kumparan-cyan);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .compartment-card {
	background-color: #252525;
}

[data-theme="dark"] .compartment-card:hover {
	background-color: #2D2D2D;
}

/* Hero Cards in Dark Mode */
[data-theme="dark"] .hero-side-card {
	background-color: var(--bg-card);
}

/* Article Content in Dark Mode */
[data-theme="dark"] .article-body-content {
	color: #D1D5DB;
}

[data-theme="dark"] .article-body-content blockquote {
	background-color: #252525;
	color: #E5E7EB;
}

[data-theme="dark"] .reaction-btn {
	background-color: #242424;
}

[data-theme="dark"] .btn-resizer {
	color: #E0E0E0;
}

[data-theme="dark"] .btn-follow-author {
	background-color: #242424;
}

/* Comments textarea */
[data-theme="dark"] .kumparan-textarea {
	background-color: #252525;
	color: #FFFFFF;
}

[data-theme="dark"] .kumparan-textarea:focus {
	background-color: #2A2A2A;
}

/* Image brightness reduction in dark mode for eye comfort */
[data-theme="dark"] img {
	opacity: 0.95;
}

[data-theme="dark"] img:hover {
	opacity: 1;
}