/*
 * Dark Theme
 *
 * Provides dark mode support with system preference detection
 * and manual toggle capability.
 */

/* CSS Custom Properties for theming */
:root {
  /* Light theme (default) */
  --bg-color: #fff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f5f5f5;
  --text-color: #515151;
  --text-secondary: #717171;
  --text-muted: #9a9a9a;
  --heading-color: #313131;
  --link-color: #268bd2;
  --link-hover-color: #1a6091;
  --border-color: #e5e5e5;
  --border-light: #eee;
  --code-bg: #f9f9f9;
  --code-color: #bf616a;
  --blockquote-color: #7a7a7a;
  --blockquote-border: #e5e5e5;
  --table-stripe: #f9f9f9;
  --masthead-color: #505050;
  --masthead-description: #a3a3a3;
  --sidebar-bg: #202020;
  --sidebar-text: rgba(255, 255, 255, 0.6);
  --sidebar-link: #fff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --toggle-bg: #fff;
  --toggle-color: #505050;
  --tag-bg: #f5f5f5;
  --tag-color: #666;
  --search-highlight: #ffeb3b;
  --message-bg: #f9f9f9;
  --message-color: #717171;
  --strong-color: #303030;
  --hr-color: #eee;
  --pagination-border: #eee;
  --pagination-hover-bg: #f5f5f5;
  --kbd-bg: #333;
  --kbd-color: #fff;
}

/* Dark theme colors */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2d2d2d;
  --text-color: #d4d4d4;
  --text-secondary: #a0a0a0;
  --text-muted: #808080;
  --heading-color: #e5e5e5;
  --link-color: #5eb3f3;
  --link-hover-color: #8ecbf7;
  --border-color: #404040;
  --border-light: #333;
  --code-bg: #2d2d2d;
  --code-color: #e5a0a7;
  --blockquote-color: #a0a0a0;
  --blockquote-border: #505050;
  --table-stripe: #242424;
  --masthead-color: #e5e5e5;
  --masthead-description: #808080;
  --sidebar-bg: #151515;
  --sidebar-text: rgba(255, 255, 255, 0.7);
  --sidebar-link: #fff;
  --sidebar-border: rgba(255, 255, 255, 0.15);
  --toggle-bg: #333;
  --toggle-color: #d4d4d4;
  --tag-bg: #333;
  --tag-color: #bbb;
  --search-highlight: #594a00;
  --message-bg: #242424;
  --message-color: #a0a0a0;
  --strong-color: #e5e5e5;
  --hr-color: #404040;
  --pagination-border: #404040;
  --pagination-hover-bg: #2d2d2d;
  --kbd-bg: #444;
  --kbd-color: #fff;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --text-color: #d4d4d4;
    --text-secondary: #a0a0a0;
    --text-muted: #808080;
    --heading-color: #e5e5e5;
    --link-color: #5eb3f3;
    --link-hover-color: #8ecbf7;
    --border-color: #404040;
    --border-light: #333;
    --code-bg: #2d2d2d;
    --code-color: #e5a0a7;
    --blockquote-color: #a0a0a0;
    --blockquote-border: #505050;
    --table-stripe: #242424;
    --masthead-color: #d4d4d4;
    --masthead-description: #808080;
    --sidebar-bg: #151515;
    --sidebar-text: rgba(255, 255, 255, 0.7);
    --sidebar-link: #fff;
    --sidebar-border: rgba(255, 255, 255, 0.15);
    --toggle-bg: #333;
    --toggle-color: #d4d4d4;
    --tag-bg: #333;
    --tag-color: #bbb;
    --search-highlight: #594a00;
    --message-bg: #242424;
    --message-color: #a0a0a0;
    --strong-color: #e5e5e5;
    --hr-color: #404040;
    --pagination-border: #404040;
    --pagination-hover-bg: #2d2d2d;
    --kbd-bg: #444;
    --kbd-color: #fff;
  }
}

/* Apply theme variables to elements */

/* Body */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

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

/* Strong text */
strong {
  color: var(--strong-color);
}

/* Code */
code {
  background-color: var(--code-bg);
  color: var(--code-color);
}

pre {
  background-color: var(--code-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

pre code {
  color: inherit;
  background-color: transparent;
}

/* Blockquotes */
blockquote {
  color: var(--blockquote-color);
  border-left-color: var(--blockquote-border);
}

/* Tables */
table {
  border-color: var(--border-color);
}

td,
th {
  border-color: var(--border-color);
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: var(--table-stripe);
}

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

/* Abbreviations */
abbr {
  color: var(--text-secondary);
}

abbr[title] {
  border-bottom-color: var(--border-color);
}

/* Messages */
.message {
  background-color: var(--message-bg);
  color: var(--message-color);
}

/* Masthead */
.masthead {
  border-bottom-color: var(--border-light);
}

.masthead-title {
  color: var(--masthead-color);
}

.masthead-title-link {
  color: var(--masthead-color);
}

.masthead-title-link:hover {
  color: var(--heading-color);
}

.masthead-title small {
  color: var(--masthead-description);
}

/* Sidebar */
.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
}

.sidebar a {
  color: var(--sidebar-link);
}

.sidebar-nav {
  border-bottom-color: var(--sidebar-border);
}

.sidebar-nav-item {
  border-top-color: var(--sidebar-border);
}

.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Sidebar toggle */
.sidebar-toggle {
  background-color: var(--toggle-bg);
  color: var(--toggle-color);
}

/* Post titles */
.page-title,
.post-title,
.post-title a {
  color: var(--heading-color);
}

/* Post date */
.post-date {
  color: var(--text-muted);
}

/* Related posts */
.related {
  border-top-color: var(--border-light);
}

.related-posts li small {
  color: var(--text-muted);
}

/* Pagination */
.pagination-item {
  border-color: var(--pagination-border);
}

a.pagination-item:hover {
  background-color: var(--pagination-hover-bg);
}

/* Tags */
.tag {
  background-color: var(--tag-bg);
  color: var(--tag-color);
}

.tag:hover {
  background-color: var(--border-color);
  color: var(--text-color);
}

/* Search */
.search-input {
  background-color: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.search-input:focus {
  border-color: var(--masthead-color);
}

.search-input:disabled {
  background-color: var(--bg-secondary);
}

.search-status,
.search-results-count {
  color: var(--text-secondary);
}

.search-result-item {
  border-bottom-color: var(--border-color);
}

.search-result-title a {
  color: var(--heading-color);
}

.search-result-title a:hover {
  color: var(--text-color);
}

.search-result-meta {
  color: var(--text-muted);
}

.search-result-tag {
  background-color: var(--tag-bg);
  color: var(--tag-color);
}

.search-result-excerpt {
  color: var(--text-secondary);
}

.search-result-excerpt mark {
  background-color: var(--search-highlight);
  color: var(--text-color);
}

.search-no-results {
  color: var(--text-muted);
}

/* Contact form */
.contact-form label {
  color: var(--masthead-color);
}

.contact-form input,
.contact-form textarea {
  background-color: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--masthead-color);
}

.contact-form button {
  background-color: var(--masthead-color);
}

.contact-form button:hover {
  background-color: var(--heading-color);
}

/* Post navigation */
.post-navigation {
  border-top-color: var(--border-color);
}

.post-navigation .post-nav-item {
  color: var(--text-secondary);
}

.post-navigation .post-nav-item:hover {
  color: var(--heading-color);
}

/* Keyboard */
kbd {
  background-color: var(--kbd-bg);
  color: var(--kbd-color);
}

/* Images - add subtle border in dark mode for better visibility */
[data-theme="dark"] img {
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img {
    opacity: 0.95;
  }
}

/*
 * Syntax highlighting for dark mode
 * Based on a dark variant of the GitHub theme
 */
[data-theme="dark"] .highlight,
[data-theme="dark"] .highlight pre {
  background: #2d2d2d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .highlight,
  :root:not([data-theme="light"]) .highlight pre {
    background: #2d2d2d;
  }
}

[data-theme="dark"] .highlight .c,
[data-theme="dark"] .highlight .cm,
[data-theme="dark"] .highlight .c1,
[data-theme="dark"] .highlight .cs { color: #6a9955; } /* Comments - green */

[data-theme="dark"] .highlight .k,
[data-theme="dark"] .highlight .kc,
[data-theme="dark"] .highlight .kd,
[data-theme="dark"] .highlight .kp,
[data-theme="dark"] .highlight .kr { color: #569cd6; } /* Keywords - blue */

[data-theme="dark"] .highlight .kt { color: #4ec9b0; } /* Keyword.Type - teal */

[data-theme="dark"] .highlight .s,
[data-theme="dark"] .highlight .sb,
[data-theme="dark"] .highlight .sc,
[data-theme="dark"] .highlight .sd,
[data-theme="dark"] .highlight .s2,
[data-theme="dark"] .highlight .se,
[data-theme="dark"] .highlight .sh,
[data-theme="dark"] .highlight .si,
[data-theme="dark"] .highlight .sx,
[data-theme="dark"] .highlight .s1,
[data-theme="dark"] .highlight .ss { color: #ce9178; } /* Strings - orange */

[data-theme="dark"] .highlight .sr { color: #d16969; } /* Regex - red */

[data-theme="dark"] .highlight .m,
[data-theme="dark"] .highlight .mf,
[data-theme="dark"] .highlight .mh,
[data-theme="dark"] .highlight .mi,
[data-theme="dark"] .highlight .mo,
[data-theme="dark"] .highlight .il { color: #b5cea8; } /* Numbers - light green */

[data-theme="dark"] .highlight .na { color: #9cdcfe; } /* Name.Attribute - light blue */
[data-theme="dark"] .highlight .nb { color: #4ec9b0; } /* Name.Builtin - teal */
[data-theme="dark"] .highlight .nc { color: #4ec9b0; } /* Name.Class - teal */
[data-theme="dark"] .highlight .no { color: #4fc1ff; } /* Name.Constant - cyan */
[data-theme="dark"] .highlight .nf { color: #dcdcaa; } /* Name.Function - yellow */
[data-theme="dark"] .highlight .nn { color: #4ec9b0; } /* Name.Namespace - teal */
[data-theme="dark"] .highlight .nt { color: #569cd6; } /* Name.Tag - blue */
[data-theme="dark"] .highlight .nv,
[data-theme="dark"] .highlight .vc,
[data-theme="dark"] .highlight .vg,
[data-theme="dark"] .highlight .vi { color: #9cdcfe; } /* Variables - light blue */

[data-theme="dark"] .highlight .o,
[data-theme="dark"] .highlight .ow { color: #d4d4d4; } /* Operators */

[data-theme="dark"] .highlight .err { color: #f44747; background-color: transparent; } /* Error */

[data-theme="dark"] .highlight .gd { color: #f44747; background-color: #3c2424; } /* Deleted */
[data-theme="dark"] .highlight .gi { color: #89d185; background-color: #243c24; } /* Inserted */

[data-theme="dark"] .highlight .gh,
[data-theme="dark"] .highlight .gu { color: #808080; } /* Headings */

[data-theme="dark"] .highlight .gp { color: #808080; } /* Prompt */
[data-theme="dark"] .highlight .go { color: #808080; } /* Output */

/* Duplicate for system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .highlight .c,
  :root:not([data-theme="light"]) .highlight .cm,
  :root:not([data-theme="light"]) .highlight .c1,
  :root:not([data-theme="light"]) .highlight .cs { color: #6a9955; }

  :root:not([data-theme="light"]) .highlight .k,
  :root:not([data-theme="light"]) .highlight .kc,
  :root:not([data-theme="light"]) .highlight .kd,
  :root:not([data-theme="light"]) .highlight .kp,
  :root:not([data-theme="light"]) .highlight .kr { color: #569cd6; }

  :root:not([data-theme="light"]) .highlight .kt { color: #4ec9b0; }

  :root:not([data-theme="light"]) .highlight .s,
  :root:not([data-theme="light"]) .highlight .sb,
  :root:not([data-theme="light"]) .highlight .sc,
  :root:not([data-theme="light"]) .highlight .sd,
  :root:not([data-theme="light"]) .highlight .s2,
  :root:not([data-theme="light"]) .highlight .se,
  :root:not([data-theme="light"]) .highlight .sh,
  :root:not([data-theme="light"]) .highlight .si,
  :root:not([data-theme="light"]) .highlight .sx,
  :root:not([data-theme="light"]) .highlight .s1,
  :root:not([data-theme="light"]) .highlight .ss { color: #ce9178; }

  :root:not([data-theme="light"]) .highlight .sr { color: #d16969; }

  :root:not([data-theme="light"]) .highlight .m,
  :root:not([data-theme="light"]) .highlight .mf,
  :root:not([data-theme="light"]) .highlight .mh,
  :root:not([data-theme="light"]) .highlight .mi,
  :root:not([data-theme="light"]) .highlight .mo,
  :root:not([data-theme="light"]) .highlight .il { color: #b5cea8; }

  :root:not([data-theme="light"]) .highlight .na { color: #9cdcfe; }
  :root:not([data-theme="light"]) .highlight .nb { color: #4ec9b0; }
  :root:not([data-theme="light"]) .highlight .nc { color: #4ec9b0; }
  :root:not([data-theme="light"]) .highlight .no { color: #4fc1ff; }
  :root:not([data-theme="light"]) .highlight .nf { color: #dcdcaa; }
  :root:not([data-theme="light"]) .highlight .nn { color: #4ec9b0; }
  :root:not([data-theme="light"]) .highlight .nt { color: #569cd6; }
  :root:not([data-theme="light"]) .highlight .nv,
  :root:not([data-theme="light"]) .highlight .vc,
  :root:not([data-theme="light"]) .highlight .vg,
  :root:not([data-theme="light"]) .highlight .vi { color: #9cdcfe; }

  :root:not([data-theme="light"]) .highlight .o,
  :root:not([data-theme="light"]) .highlight .ow { color: #d4d4d4; }

  :root:not([data-theme="light"]) .highlight .err { color: #f44747; background-color: transparent; }

  :root:not([data-theme="light"]) .highlight .gd { color: #f44747; background-color: #3c2424; }
  :root:not([data-theme="light"]) .highlight .gi { color: #89d185; background-color: #243c24; }

  :root:not([data-theme="light"]) .highlight .gh,
  :root:not([data-theme="light"]) .highlight .gu { color: #808080; }

  :root:not([data-theme="light"]) .highlight .gp { color: #808080; }
  :root:not([data-theme="light"]) .highlight .go { color: #808080; }
}

/*
 * Theme toggle button
 */
.theme-toggle {
  position: fixed;
  top: 0.8rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--toggle-bg);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.theme-toggle:hover {
  background-color: var(--bg-tertiary);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--toggle-color);
  transition: fill 0.3s ease;
}

/* Show sun icon in dark mode, moon icon in light mode */
.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun-icon {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .moon-icon {
    display: none;
  }
}

[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
  display: block;
}

/* Responsive positioning */
@media (max-width: 48em) {
  .theme-toggle {
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
  }

  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}