/* =============================================================
   eARThPeace - PsymBatik Dark Theme
   Base: #002019  Accent: #C8A96E
   ============================================================= */

/* --- Colour variables --- */
:root {
  --bg-primary:    #002019;
  --bg-secondary:  #00301f;
  --bg-card:       #003d28;
  --text-primary:  #e8dcc8;
  --text-muted:    #a09880;
  --accent:        #C8A96E;
  --accent-hover:  #d4ba85;
  --border:        #005035;
  --link:          #C8A96E;
  --link-hover:    #d4ba85;
}

/* --- Base --- */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* --- Header & navigation --- */
#header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

#nav a {
  color: var(--text-primary);
}

#nav a:hover,
#nav a:focus {
  color: var(--accent);
}

/* --- Links --- */
a {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
}

/* --- Main content area --- */
#main,
#wrapper {
  background-color: var(--bg-primary);
}

/* --- Cards / post previews --- */
.posts article,
.post-item,
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

/* --- Sidebar --- */
#sidebar {
  background-color: var(--bg-secondary);
  border-left: 1px solid var(--border);
}

/* --- Footer --- */
#footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

#footer a {
  color: var(--accent);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--accent);
}

/* --- Buttons --- */
.button,
button,
input[type="submit"] {
  background-color: var(--accent);
  color: var(--bg-primary);
  border: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--accent-hover);
  color: var(--bg-primary);
}

/* --- Code blocks --- */
pre, code {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

/* --- Forms --- */
input, textarea, select {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: none;
}

/* --- Horizontal rule --- */
hr {
  border-color: var(--border);
}

/* --- Text utilities --- */
.text-muted,
.post-meta,
.article-meta {
  color: var(--text-muted);
}