/* ===========================
   Thergic Cyber Markdown Theme
   Expanded Neon Palette Edition
   =========================== */

/*** Base colors ***/
:root {
  --bg-main: #121619;
  --bg-surface: #1c2024;
  --text-main: #cfd6cf;
  --text-bright: #e6ffe8;
  --accent-green: #65f85a;
  --accent-teal: #3af8c2;
  --accent-violet: #b86aff;
  --border-dim: #2a2f33;
}

/*** General layout ***/
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: "Inter", "Segoe UI", sans-serif;
  line-height: 1.65;
  font-size: 18px;
  margin: 40px auto;
  max-width: 750px;
  padding: 0 16px;
}

/*** Headings ***/
h1, h2, h3, h4, h5, h6 {
  color: var(--accent-green);
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  line-height: 1.25;
  text-shadow: 0 0 6px rgba(101, 248, 90, 0.3);
}

h1 {
  font-size: 2.2em;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--accent-green);
  padding-bottom: 0.4em;
}
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; color: var(--accent-teal); }

/*** Paragraphs and lists ***/
p, ul, ol {
  margin: 0 0 1.2em 0;
}

ul li, ol li {
  margin: 0.25em 0;
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-green),
    transparent
  );
  margin: 2.2em 0;
  opacity: 0.6;
}

/*** Links ***/
a {
  color: var(--accent-teal);
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
a:hover {
  color: var(--accent-violet);
  text-shadow: 0 0 8px var(--accent-violet);
}

/*** Code blocks ***/
code, pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.95em;
}

code {
  background: rgba(184, 106, 255, 0.08);
  color: var(--accent-violet);
  padding: 2px 5px;
  border-radius: 4px;
}

pre {
  background: var(--bg-surface);
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border-dim);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

pre code {
  background: none;
  color: var(--text-bright);
}

/*** Syntax highlighting (light-touch pseudo) ***/
pre span.kw { color: var(--accent-teal); }
pre span.fn { color: var(--accent-violet); }
pre span.str { color: var(--accent-green); }
pre span.num { color: #f8cb3a; }

/*** Blockquotes ***/
blockquote {
  border-left: 3px solid var(--accent-violet);
  background: rgba(184, 106, 255, 0.05);
  padding: 0.8em 1em;
  margin: 1.8em 0;
  font-style: italic;
  color: var(--text-bright);
  border-radius: 4px;
}

/*** Tables ***/
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.95em;
}
th, td {
  border: 1px solid var(--border-dim);
  padding: 0.6em 0.8em;
}
th {
  background: rgba(101, 248, 90, 0.1);
  color: var(--accent-green);
  text-align: left;
}
tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}
tr:hover td {
  background: rgba(58, 248, 194, 0.05);
}

/*** Misc elements ***/
em { color: var(--accent-teal); }
strong { color: var(--accent-green); }
del { opacity: 0.6; }
sup { font-size: 0.7em; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5em auto;
  border: 1px solid var(--border-dim);
}

/*** Footer ***/
footer {
  border-top: 1px solid var(--accent-green);
  margin-top: 3em;
  padding-top: 1em;
  text-align: center;
  font-size: 0.85em;
  opacity: 0.8;
}

/*** Transitions / Interactions ***/
button, a, code, pre, table, blockquote {
  transition: all 0.25s ease;
}

/*** Glow hover for fun ***/
pre:hover, blockquote:hover, table:hover {
  box-shadow: 0 0 8px rgba(101, 248, 90, 0.25);
}