/* ML Meanders - Dark Mode */

/* ============================================
   Dark Theme Colors
   ============================================ */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg: #1a1a2e;
  --color-bg-subtle: #1f1f35;
  --color-surface: #252540;
  --color-surface-raised: #2a2a48;

  /* Text */
  --color-text: #e8e8ec;
  --color-text-muted: #a0a0b0;
  --color-text-faint: #6a6a7a;

  /* Accent */
  --color-accent: #6bb5a8;
  --color-accent-hover: #7fcfc0;

  /* Links */
  --color-link: #6bb5a8;
  --color-link-hover: #7fcfc0;

  /* Borders */
  --color-border: #3a3a55;
  --color-border-subtle: #2d2d45;

  /* Code */
  --color-code-bg: #252540;
  --color-code-text: #e8e8ec;
  --color-code-border: #3a3a55;

  /* Shadows need to be stronger in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Dark Mode Specific Overrides
   ============================================ */

/* Reduce paper texture in dark mode */
[data-theme="dark"] body::before {
  opacity: 0.02;
  filter: invert(1);
}

/* Selection */
[data-theme="dark"] ::selection {
  background-color: var(--color-accent);
  color: #1a1a2e;
}

/* Mark/highlight */
[data-theme="dark"] mark {
  background-color: rgba(107, 181, 168, 0.3);
  color: var(--color-text);
}

/* Scrollbar */
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* ============================================
   Syntax Highlighting - Dark Theme
   ============================================ */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
  color: #6a9955;
}

[data-theme="dark"] .token.punctuation {
  color: #a0a0b0;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
  color: #f78c6c;
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
  color: #a8dc76;
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
  color: #89ddff;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
  color: #6bb5a8;
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
  color: #82aaff;
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
  color: #f07178;
}

/* ============================================
   KaTeX Dark Mode
   ============================================ */
[data-theme="dark"] .katex {
  color: var(--color-text);
}

[data-theme="dark"] .katex-error {
  color: #f78c6c;
  background-color: rgba(247, 140, 108, 0.15);
}

/* ============================================
   Images in Dark Mode
   ============================================ */
/* Slightly reduce brightness of images */
[data-theme="dark"] figure img {
  filter: brightness(0.9);
}

/* Don't dim images with .no-dim class */
[data-theme="dark"] figure.no-dim img {
  filter: none;
}

/* ============================================
   Header in Dark Mode
   ============================================ */
[data-theme="dark"] .site-header {
  background-color: rgba(26, 26, 46, 0.95);
}

/* ============================================
   Blockquote in Dark Mode
   ============================================ */
[data-theme="dark"] blockquote {
  background-color: var(--color-bg-subtle);
  border-left-color: var(--color-accent);
}

/* ============================================
   Theorem Environments in Dark Mode
   ============================================ */
[data-theme="dark"] .theorem,
[data-theme="dark"] .lemma,
[data-theme="dark"] .definition,
[data-theme="dark"] .proposition,
[data-theme="dark"] .corollary,
[data-theme="dark"] .example,
[data-theme="dark"] .remark {
  background-color: var(--color-bg-subtle);
  border-left-color: var(--color-accent);
}

/* ============================================
   Transitions for Theme Switch
   ============================================ */
html {
  transition: background-color var(--transition-slow),
              color var(--transition-slow);
}

body,
.site-header,
.site-footer,
pre,
code,
blockquote,
.theorem,
.lemma,
.definition,
.proposition,
.corollary,
.example,
.remark,
.proof,
.citation-tooltip,
.toc-mobile {
  transition: background-color var(--transition-slow),
              border-color var(--transition-slow),
              color var(--transition-slow);
}

/* Disable transitions on initial load to prevent flash */
html:not(.transitions-enabled) * {
  transition: none !important;
}