/* ═══════════════════════════════════════════════════
   Blog / Article pages — theme CSS variables
   Applied via data-theme attribute set by theme-inject.js
   Default (no attribute) = light blue theme for guests
   ═══════════════════════════════════════════════════ */

:root {
  --bg:          #EEF4FA;
  --bg2:         #FFFFFF;
  --bg3:         #E2EBF4;
  --accent:      #3E7CB1;
  --accent-soft: rgba(62,124,177,0.10);
  --accent-pale: #EBF3FB;
  --label:       #1A2436;
  --label2:      #506080;
  --border:      rgba(62,124,177,0.18);
  --header-bg:   #3E7CB1;
  --header-text: #FFFFFF;
  --radius:      16px;
}

[data-theme="boy"] {
  --bg:          #EEF4FA;
  --bg2:         #FFFFFF;
  --bg3:         #E2EBF4;
  --accent:      #3E7CB1;
  --accent-soft: rgba(62,124,177,0.10);
  --accent-pale: #EBF3FB;
  --label:       #1A2436;
  --label2:      #506080;
  --border:      rgba(62,124,177,0.18);
  --header-bg:   #3E7CB1;
  --header-text: #FFFFFF;
}

[data-theme="girl"] {
  --bg:          #FEF6F3;
  --bg2:         #FFFFFF;
  --bg3:         #F8E8E2;
  --accent:      #B5604E;
  --accent-soft: rgba(181,96,78,0.10);
  --accent-pale: #FDEEE9;
  --label:       #381816;
  --label2:      #7A4840;
  --border:      rgba(212,137,122,0.22);
  --header-bg:   #B5604E;
  --header-text: #FFFFFF;
}

[data-theme="neutral"] {
  --bg:          #FAF7F2;
  --bg2:         #FFFFFF;
  --bg3:         #F0E8DA;
  --accent:      #8A6238;
  --accent-soft: rgba(138,98,56,0.10);
  --accent-pale: #F5EDE0;
  --label:       #2A2010;
  --label2:      #6A5838;
  --border:      rgba(192,144,96,0.22);
  --header-bg:   #8A6238;
  --header-text: #FFFFFF;
}

[data-theme="graphite"] {
  --bg:          #15181E;
  --bg2:         #1E222A;
  --bg3:         #252B34;
  --accent:      #5A8880;
  --accent-soft: rgba(90,136,128,0.16);
  --accent-pale: #1E2A28;
  --label:       #E2E8F0;
  --label2:      #8898AC;
  --border:      rgba(132,165,157,0.16);
  --header-bg:   #1E222A;
  --header-text: #E2E8F0;
  color-scheme:  dark;
}

/* ── Shared page elements using variables ── */
body {
  background: var(--bg) !important;
  color: var(--label) !important;
}

.header {
  background: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-bottom: 1px solid var(--border);
}
.header a { color: var(--header-text) !important; }
.header span { color: var(--header-text) !important; opacity: 0.75; }

h1, h2 { color: var(--label) !important; }
h3 { color: var(--accent) !important; }
p, li { color: var(--label); }

table th {
  background: var(--accent) !important;
  color: #fff !important;
}
table td { border-bottom-color: var(--border) !important; }
table tr:nth-child(even) td { background: var(--bg3) !important; }

.tip {
  background: var(--accent-pale) !important;
  border-left-color: var(--accent) !important;
}
.tip strong { color: var(--accent) !important; }

.warning {
  background: #fffbeb !important;
}

.cta {
  background: var(--accent) !important;
}
.cta h3 { color: #fff !important; }
.cta p { color: rgba(255,255,255,0.88) !important; }
.cta a {
  background: var(--bg2) !important;
  color: var(--accent) !important;
}

.nav-links a {
  background: var(--bg3) !important;
  color: var(--accent) !important;
}

footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--label2) !important;
}
footer a { color: var(--label2) !important; }
footer a:hover { color: var(--accent) !important; }

/* ── Additional elements for full theme coverage ── */
.container {
  background: var(--bg) !important;
  color: var(--label) !important;
}

/* Article content blocks */
blockquote {
  background: var(--bg3) !important;
  border-left-color: var(--accent) !important;
  color: var(--label2) !important;
}

/* Input/select elements */
input, select, textarea {
  background: var(--bg2) !important;
  color: var(--label) !important;
  border-color: var(--border) !important;
}

/* Graphite: table rows need dark bg */
[data-theme='graphite'] table tr:nth-child(odd) td {
  background: var(--bg2) !important;
}
[data-theme='graphite'] table tr:nth-child(even) td {
  background: var(--bg3) !important;
}

/* Nav links in all themes */
[data-theme='graphite'] .nav-links a {
  background: var(--bg3) !important;
  color: var(--accent) !important;
}

/* Full page background fix */
html {
  background: var(--bg) !important;
}