// =============================================================================
// Dark Theme
// =============================================================================
// Apply .dm-theme-dark on or above the editor to activate dark theme.
// Apply .dm-theme-auto for automatic dark mode via prefers-color-scheme.
//
// Example:
//   <div class="dm-theme-dark">
//     <domternal-editor />
//   </div>
//
//   <domternal-editor class="dm-theme-auto" />
// =============================================================================

@mixin dark-tokens {
  --dm-color-scheme: dark;
  --dm-bg: #1e1e1e;
  --dm-text: #e0e0e0;
  --dm-muted: #9ca3af;
  --dm-surface: #2a2a2a;
  --dm-border-color: #3a3a3a;
  --dm-hover: rgba(255, 255, 255, 0.08);
  --dm-active: rgba(255, 255, 255, 0.15);
  --dm-accent: #60a5fa;
  --dm-accent-hover: #93c5fd;
  --dm-accent-surface: rgba(96, 165, 250, 0.15);
  --dm-focus-color: rgba(96, 165, 250, 0.3);
  --dm-selection: rgba(96, 165, 250, 0.25);
  --dm-code-surface: #2d2d2d;
  --dm-code-color: inherit;

  // Scrollbar thumb + popover shadow - lighten for contrast on dark bg.
  --dm-scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --dm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
  --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
  --dm-blockquote-border: 3px solid #555555;
  --dm-blockquote-color: #a0a0a0;

  // Subtle highlight tint for the block whose BlockContextMenu is open.
  // Lighter alpha for dark backgrounds so the cue is visible but not jarring.
  --dm-block-context-active-bg: rgba(255, 255, 255, 0.05);

  // Syntax highlighting
  --dm-syntax-keyword: #ff7b72;
  --dm-syntax-entity: #d2a8ff;
  --dm-syntax-constant: #79c0ff;
  --dm-syntax-string: #a5d6ff;
  --dm-syntax-variable: #ffa657;
  --dm-syntax-comment: #8b949e;
  --dm-syntax-tag: #7ee787;
  --dm-syntax-addition: #aff5b4;
  --dm-syntax-addition-bg: #033a16;
  --dm-syntax-deletion: #ffdcd7;
  --dm-syntax-deletion-bg: #67060c;

  // Block colors (Notion-style dark-mode palette). Backgrounds are
  // desaturated darker tones; text colors carry the visible chroma.
  // Source: Notion's published dark palette.
  --dm-block-bg-gray: #2f2f2f;
  --dm-block-bg-brown: #4a3228;
  --dm-block-bg-orange: #5c3b1e;
  --dm-block-bg-yellow: #564328;
  --dm-block-bg-green: #243d30;
  --dm-block-bg-blue: #143a4e;
  --dm-block-bg-purple: #3c2d49;
  --dm-block-bg-pink: #4e2c3c;
  --dm-block-bg-red: #5c1e1e;

  // Tuned for WCAG AA contrast (>= 4.5:1) against the dark editor
  // background (#1e1e1e). Notion's published palette runs slightly
  // darker on green/blue/orange/pink; we lift those a touch so text
  // marks (which use these as the foreground color) remain readable
  // without a tinted background.
  --dm-block-text-gray: #9b9a97;
  --dm-block-text-brown: #ba856f;
  --dm-block-text-orange: #d68a52;
  --dm-block-text-yellow: #ca9849;
  --dm-block-text-green: #6db285;
  --dm-block-text-blue: #7a9bd6;
  --dm-block-text-purple: #a877d8;
  --dm-block-text-pink: #dc6da4;
  --dm-block-text-red: #df5452;

  // Selected-block halo - lift opacity for visibility on dark bg.
  --dm-block-selected-halo: rgba(112, 207, 248, 0.35);

  // Note: layout / geometry tokens (--dm-block-handle-gutter,
  // --dm-block-handle-left, --dm-block-inline-padding) are intentionally
  // NOT overridden here - geometry stays identical between light/dark.
}

.dm-theme-dark,
.dm-theme-dark .dm-editor,
.dm-theme-dark .dm-toolbar,
.dm-theme-dark .dm-bubble-menu,
.dm-theme-dark .dm-floating-menu,
.dm-theme-dark .dm-emoji-picker,
.dm-theme-dark .dm-emoji-suggestion,
.dm-theme-dark .dm-mention-suggestion,
.dm-theme-dark .dm-table-controls-dropdown,
.dm-theme-dark .dm-slash-command-menu,
.dm-theme-dark .dm-block-context-menu,
.dm-theme-dark .dm-link-popover,
.dm-theme-dark .dm-image-popover {
  @include dark-tokens;
}

// Auto dark mode - follows system preference
@media (prefers-color-scheme: dark) {
  .dm-theme-auto,
  .dm-theme-auto .dm-editor,
  .dm-theme-auto .dm-toolbar,
  .dm-theme-auto .dm-bubble-menu,
  .dm-theme-auto .dm-floating-menu,
  .dm-theme-auto .dm-emoji-picker,
  .dm-theme-auto .dm-emoji-suggestion,
  .dm-theme-auto .dm-mention-suggestion,
  .dm-theme-auto .dm-table-controls-dropdown,
  .dm-theme-auto .dm-slash-command-menu,
  .dm-theme-auto .dm-block-context-menu,
  .dm-theme-auto .dm-link-popover,
  .dm-theme-auto .dm-image-popover {
    @include dark-tokens;
  }
}

// =============================================================================
// Floating ToC outline - dark variant
// =============================================================================
// The outline mounts OUTSIDE `.dm-editor`, so it needs its own dark
// selector list - the @include dark-tokens above scopes only general
// theme tokens (text, background, etc.) which we do not need to flip
// here. Tick colors are the only ToC tokens that need a dark variant.

.dm-theme-dark .dm-toc-outline,
.dm-theme-dark.dm-toc-outline {
  --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
  --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
  --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);

  // Card variants - flip light surfaces to dark equivalents.
  --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
  --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
  --dm-toc-row-color: rgba(255, 255, 255, 0.7);
  --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
  --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
}

// Inline /toc block - dark variant. Only flip block-specific tokens; the
// rest inherits from the dark cascade via the editor host.
.dm-theme-dark .dm-toc-block,
.dm-theme-dark.dm-toc-block {
  --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
  --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
  --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
  --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
  --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
  --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
  --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
}

@media (prefers-color-scheme: dark) {
  .dm-theme-auto .dm-toc-block,
  .dm-theme-auto.dm-toc-block {
    --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
    --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
    --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
    --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
    --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
    --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
    --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-color-scheme: dark) {
  .dm-theme-auto .dm-toc-outline,
  .dm-theme-auto.dm-toc-outline {
    --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
    --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
    --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);

    --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
    --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
    --dm-toc-row-color: rgba(255, 255, 255, 0.7);
    --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
    --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
  }
}