/* ==============================
   Dark UI Theme (explicit)
   ============================== */

:root {
  --bg-main: #0b0b0c;
  --bg-panel: #121214;
  --bg-input: #1a1a1d;

  --text-main: #e6e6eb;
  --text-muted: #a0a0a8;

  --border-subtle: #2a2a30;

  --accent-blue: #2a6fd6;
  --accent-blue-hover: #1f5fb8;
  --accent-red: #c24a3a;
  --accent-red-hover: #a43e31;
}

/* Page */
body {
  background: var(--bg-main);
  color: var(--text-main);
}

/* Links — explicit, dark-safe */
a {
  color: var(--accent-blue);
}

a:visited {
  color: var(--accent-blue);
}

a:active {
  color: var(--accent-blue-hover);
}

/* Containers / sections */
main,
section {
  background: transparent;
}

/* Headings */
h1, h2, h3 {
  color: var(--text-main);
}

/* Labels */
label {
  color: var(--text-muted);
}

/* Inputs */
.intent-field input,
.intent-field textarea,
.intent-field select {
  background: var(--bg-input);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

.intent-field input:focus,
.intent-field textarea:focus,
.intent-field select:focus {
  border-color: var(--accent-blue);
}

/* Help button */
.intent-help {
  background: transparent;
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.intent-help:hover {
  background: var(--accent-blue);
  color: #fff;
}

.btn--primary {
  background: var(--accent-blue);
  color: #fff;
  border-color: transparent;
}

.btn--primary:hover {
  background: var(--accent-blue-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.btn--ghost:hover {
  background: rgba(47, 128, 255, 0.15);
}

.btn--danger {
  background: var(--accent-red);
  color: #fff;
  border-color: transparent;
}

.btn--danger:hover {
  background: var(--accent-red-hover);
}

/* Error output */
#error-area {
  color: #ff6b6b;
  background: transparent;
}

/* --------------------------------
   Blog readability tuning (scoped)
   -------------------------------- */

/* Blog index + blog post containers */
main.container article,
main.container ul {
  color: #c2c6cc;
}

/* Blog post body text */
main.container article p,
main.container article li {
  color: #c2c6cc;
}

/* Blog titles */
main.container article h1,
main.container article h2,
main.container article h3,
main.container ul li > a {
  color: #e6e6eb;
}

/* Blog metadata */
main.container article header,
main.container ul li div {
  color: var(--text-muted);
}

/* Blog links (index + article) */
main.container article a,
main.container ul li > a {
  color: #9bbcff;
}