/* Sound Byte Labs Blog - Custom Terminal Theme Colors */
/* Matches the Doxygen site palette */

:root {
  /* Dark background like Doxygen dark mode */
  --background: #1a1a1a;
  --foreground: #e0e0e0;

  /* SBL pink accent - matches --sbl-accent from Doxygen */
  --accent: #dd4488;

  /* Keep terminal defaults for sizing */
  --font-size: 1rem;
  --line-height: 1.54em;
  --radius: 0;
}

/* Code blocks get the purple-pink gradient border */
pre {
  border-left: 4px solid #8844dd;
  border-image: linear-gradient(180deg, #8844dd 0%, #dd4488 100%) 1;
}

/* Links use the blue */
a {
  color: #4477ff;
}

a:hover {
  color: #dd4488;
}

/* Logo text gets the gradient treatment */
.logo a {
  background: linear-gradient(135deg, #8844dd 0%, #dd4488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fallback for browsers without gradient text */
@supports not (background-clip: text) {
  .logo a {
    color: #8844dd;
  }
}

/* Post titles */
.post .post-title a {
  color: #e0e0e0;
}

.post .post-title a:hover {
  color: #dd4488;
}

/* Tags get the purple */
.post .post-tags a {
  color: #8844dd;
}

.post .post-tags a:hover {
  color: #dd4488;
}

/* Table headers match Doxygen blue */
th {
  background-color: #2255ee;
  color: white;
}

/* Inline code */
code {
  color: #dd4488;
  background: #252525;
  border-color: #444;
}

/* Blockquotes get accent color */
blockquote {
  border-color: #dd4488;
}

blockquote::before {
  color: #dd4488;
}

/* Button styling */
button {
  color: #dd4488;
  border-color: #dd4488;
}

button:hover {
  background: rgba(221, 68, 136, 0.15);
}

/* Horizontal rules */
hr {
  background: linear-gradient(90deg, #8844dd 0%, #dd4488 100%);
}

/* List markers */
li::marker {
  color: #8844dd;
}

/* Selection highlight */
::selection {
  background: rgba(136, 68, 221, 0.3);
  color: #e0e0e0;
}

/* Mermaid diagrams */
.mermaid {
  background: #252525;
  padding: 1rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  border-left: 4px solid #8844dd;
  overflow-x: auto;
}

.mermaid svg {
  display: block;
  margin: 0 auto;
}