/* ============================
Dark theme (Chirpy-style)
============================ */

:root {
–main-bg: rgb(27 27 30);
–card-bg: #1e1e1e;
–sidebar-bg: #1e1e1e;
–sidebar-hover-bg: #262626;
–button-bg: #1e1e1e;
–main-border-color: rgb(44 45 45);
–btn-border-color: #2e2f31;
–search-border-color: rgb(55 55 55);

–text-color: rgb(175 176 177);
–text-muted-color: #868686;
–heading-color: #cccccc;
–label-color: #a7a7a7;
–link-color: rgb(138 180 248);
–link-underline-color: rgb(82 108 150);
–site-title-color: #717070;
–site-subtitle-color: #868686;

–card-header-bg: #292929;
–tb-odd-bg: #252526;
–tb-even-bg: rgb(31 31 34);
–tb-border-color: #252526;

–topbar-bg: rgb(27 27 30 / 64%);
–checkbox-color: rgb(118 120 121);
–checkbox-checked-color: var(–link-color);
}

/* Base */
html, body {
background-color: var(–main-bg) !important;
color: var(–text-color) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title, .post-title, .page-title {
color: var(–heading-color) !important;
}

/* Links */
a {
color: var(–link-color) !important;
text-decoration-color: var(–link-underline-color);
}
a:hover {
color: var(–text-muted-highlight-color, #aeaeae) !important;
}

/* Site title / tagline (adjust selectors to your theme) */
.site-title, .site-branding .site-title a {
color: var(–site-title-color) !important;
}
.site-description, .site-tagline {
color: var(–site-subtitle-color) !important;
}

/* Header / topbar */
header, .site-header, #masthead {
background-color: var(–topbar-bg) !important;
border-bottom: 1px solid var(–main-border-color);
}

/* Sidebar / widgets */
.sidebar, #secondary, .widget-area {
background-color: var(–sidebar-bg) !important;
border-color: var(–main-border-color) !important;
}
.widget {
background-color: var(–sidebar-bg) !important;
color: var(–sidebar-muted-color, #868686);
}
.widget a:hover {
background-color: var(–sidebar-hover-bg) !important;
}

/* Cards / boxes (posts, blocks, etc.) */
.card, .wp-block-group, .entry, article.post {
background-color: var(–card-bg) !important;
border: 1px solid var(–main-border-color) !important;
}
.card-header {
background-color: var(–card-header-bg) !important;
}

/* Buttons */
button, .btn, input[type=”submit”] {
background-color: var(–button-bg) !important;
color: var(–text-color) !important;
border: 1px solid var(–btn-border-color) !important;
}
button:hover, .btn:hover {
background-color: var(–sidebar-hover-bg) !important;
}

/* Forms / search */
input, textarea, select {
background-color: var(–button-bg) !important;
color: var(–text-color) !important;
border: 1px solid var(–search-border-color) !important;
}
input:focus, textarea:focus {
border-color: rgb(112 114 115) !important;
outline: none;
}

/* Tables */
table {
border-color: var(–tb-border-color) !important;
}
table tr:nth-child(odd) { background-color: var(–tb-odd-bg) !important; }
table tr:nth-child(even) { background-color: var(–tb-even-bg) !important; }

/* Blockquotes */
blockquote {
border-left: 3px solid rgb(66 66 66);
color: var(–text-muted-color) !important;
}

/* Checkboxes (task lists etc.) */
input[type=”checkbox”] {
accent-color: var(–checkbox-checked-color);
}

/* Footer */
footer, #colophon {
background-color: var(–main-bg) !important;
color: var(–text-muted-color) !important;
border-top: 1px solid var(–main-border-color);
}