/*
 * Lexxy Dark Theme Override
 * Overrides Lexxy's actual CSS variables and hooks when dark theme is active
 */

[data-theme="dark"] {
  /* Base palette */
  --lexxy-color-ink: #f5f5f4;
  --lexxy-color-ink-medium: #d6d3d1;
  --lexxy-color-ink-light: #a8a29e;
  --lexxy-color-ink-lighter: #78716c;
  --lexxy-color-ink-lightest: #292524;
  --lexxy-color-ink-inverted: #1c1917;

  /* Surfaces and text */
  --lexxy-color-canvas: #1c1917;
  --lexxy-color-text: #f5f5f4;
  --lexxy-color-text-subtle: #a8a29e;

  /* Accent and selection */
  --lexxy-color-accent-dark: var(--color-brand-hover);
  --lexxy-color-accent-medium: var(--color-brand);
  --lexxy-color-accent-light: var(--color-brand-alt);
  --lexxy-color-accent-lightest: var(--color-brand-soft);
  --lexxy-color-link: var(--color-brand-hover);
  --lexxy-color-selected: var(--color-brand-soft);
  --lexxy-color-selected-hover: color-mix(in oklab, var(--color-brand) 24%, transparent);
  --lexxy-color-selected-dark: var(--color-brand-hover);

  /* Code */
  --lexxy-color-code-bg: #292524;
  --lexxy-color-code-token-att: #fcd34d;
  --lexxy-color-code-token-comment: #78716c;
  --lexxy-color-code-token-function: #f472b6;
  --lexxy-color-code-token-operator: #f5f5f4;
  --lexxy-color-code-token-property: #60a5fa;
  --lexxy-color-code-token-punctuation: #a8a29e;
  --lexxy-color-code-token-selector: #4ade80;
  --lexxy-color-code-token-variable: #c084fc;

  /* Status colors */
  --lexxy-color-red: #f87171;
  --lexxy-color-green: #4ade80;
  --lexxy-color-blue: #60a5fa;
  --lexxy-color-purple: #c084fc;

  /* Text color highlights */
  --highlight-1: #fef08a;
  --highlight-2: #fdba74;
  --highlight-3: #fca5a5;
  --highlight-4: #f9a8d4;
  --highlight-5: #c4b5fd;
  --highlight-6: #7dd3fc;
  --highlight-7: #86efac;
  --highlight-8: #fdba74;
  --highlight-9: #d6d3d1;

  --highlight-bg-1: rgba(254, 240, 138, 0.22);
  --highlight-bg-2: rgba(253, 186, 116, 0.22);
  --highlight-bg-3: rgba(252, 165, 165, 0.22);
  --highlight-bg-4: rgba(249, 168, 212, 0.22);
  --highlight-bg-5: rgba(196, 181, 253, 0.22);
  --highlight-bg-6: rgba(125, 211, 252, 0.22);
  --highlight-bg-7: rgba(134, 239, 172, 0.22);
  --highlight-bg-8: rgba(253, 186, 116, 0.22);
  --highlight-bg-9: rgba(214, 211, 209, 0.22);

  /* Table */
  --lexxy-color-table-header-bg: #292524;
  --lexxy-color-table-cell-border: #44403c;
  --lexxy-color-table-cell-selected: var(--color-brand-soft);
  --lexxy-color-table-cell-selected-border: var(--color-brand-hover);
  --lexxy-color-table-cell-selected-bg: var(--color-brand-soft);

  /* Focus ring */
  --lexxy-focus-ring-color: color-mix(in oklab, var(--color-brand) 50%, transparent);

  /* Shadows - darker for dark mode */
  --lexxy-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Editor specific overrides for dark mode */
[data-theme="dark"] lexxy-editor {
  background-color: var(--lexxy-color-canvas);
  border-color: var(--lexxy-color-ink-lighter);
  color: var(--lexxy-color-text);
}

[data-theme="dark"] lexxy-editor:focus-within {
  border-color: var(--lexxy-color-accent-dark);
}

/* Toolbar in dark mode */
[data-theme="dark"] lexxy-toolbar {
  border-color: var(--lexxy-color-ink-lighter);
}

[data-theme="dark"] .lexxy-editor__toolbar-button {
  color: var(--lexxy-color-text-subtle);
}

[data-theme="dark"] .lexxy-editor__toolbar-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--lexxy-color-text);
}

[data-theme="dark"] .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-text);
}

/* Dropdowns in dark mode */
[data-theme="dark"] .lexxy-editor__toolbar-dropdown-content,
[data-theme="dark"] .lexxy-editor__toolbar-overflow-menu,
[data-theme="dark"] .lexxy-prompt-menu {
  background-color: #292524;
  border-color: #44403c;
  box-shadow: var(--lexxy-shadow);
}

[data-theme="dark"] lexxy-link-dropdown input,
[data-theme="dark"] lexxy-code-language-picker select {
  background-color: var(--lexxy-color-canvas);
  border-color: var(--lexxy-color-ink-lighter);
  color: var(--lexxy-color-text);
}

[data-theme="dark"] lexxy-link-dropdown input::placeholder {
  color: var(--lexxy-color-text-subtle);
}

/* Placeholder text */
[data-theme="dark"] .lexxy-editor--empty .lexxy-editor__content::before {
  color: var(--lexxy-color-text-subtle);
}

/* Code blocks */
[data-theme="dark"] .lexxy-content pre,
[data-theme="dark"] lexxy-editor pre {
  background-color: var(--lexxy-color-code-bg);
  border-color: var(--lexxy-color-ink-lighter);
}

[data-theme="dark"] .lexxy-content code,
[data-theme="dark"] lexxy-editor code {
  background-color: var(--lexxy-color-code-bg);
  color: var(--lexxy-color-text);
}

/* Blockquotes */
[data-theme="dark"] .lexxy-content blockquote,
[data-theme="dark"] lexxy-editor blockquote {
  border-left-color: var(--lexxy-color-accent-dark);
  color: var(--lexxy-color-text-subtle);
}

/* Tables */
[data-theme="dark"] .lexxy-content table,
[data-theme="dark"] lexxy-editor table {
  border-color: var(--lexxy-color-table-cell-border);
}

[data-theme="dark"] .lexxy-content th,
[data-theme="dark"] lexxy-editor th {
  background-color: var(--lexxy-color-table-header-bg);
  border-color: var(--lexxy-color-table-cell-border);
}

[data-theme="dark"] .lexxy-content td,
[data-theme="dark"] lexxy-editor td {
  border-color: var(--lexxy-color-table-cell-border);
}

/* Links */
[data-theme="dark"] .lexxy-content a,
[data-theme="dark"] lexxy-editor a {
  color: var(--lexxy-color-link);
}

/* Horizontal rule */
[data-theme="dark"] .lexxy-content hr,
[data-theme="dark"] lexxy-editor hr {
  border-color: var(--lexxy-color-ink-lighter);
}

/* Prompt/autocomplete menu */
[data-theme="dark"] .lexxy-prompt-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .lexxy-prompt-menu__item[aria-selected="true"] {
  background-color: var(--lexxy-color-selected);
}

/* Trix editor fallback (ActionText) */
[data-theme="dark"] trix-editor {
  background-color: var(--lexxy-color-canvas, #1c1917);
  color: var(--lexxy-color-text, #f5f5f4);
  border-color: var(--lexxy-color-ink-lighter, #44403c);
}

[data-theme="dark"] trix-toolbar {
  background-color: #292524;
  border-color: var(--lexxy-color-ink-lighter, #44403c);
}

[data-theme="dark"] trix-toolbar button {
  color: var(--lexxy-color-text-subtle, #a8a29e);
}

[data-theme="dark"] trix-toolbar button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] trix-toolbar button.trix-active {
  background-color: rgba(249, 115, 22, 0.2);
}