/*
 * Lexxy Dark Theme Override
 * Overrides lexxy CSS variables when dark theme is active
 */

[data-theme="dark"] {
  /* Ink colors - inverted for dark mode */
  --lexxy-color-ink: #f5f5f4;
  --lexxy-color-ink-dark: #e7e5e4;
  --lexxy-color-ink-light: #a8a29e;
  --lexxy-color-ink-lighter: #78716c;
  --lexxy-color-ink-lightest: #57534e;

  /* Canvas and text - dark backgrounds */
  --lexxy-color-canvas: #1c1917;
  --lexxy-color-canvas-light: #292524;
  --lexxy-color-text: #f5f5f4;
  --lexxy-color-text-muted: #a8a29e;

  /* Accent colors */
  --lexxy-color-accent: #f97316;
  --lexxy-color-accent-dark: #ea580c;
  --lexxy-color-accent-light: #fdba74;
  --lexxy-color-accent-lighter: rgba(249, 115, 22, 0.2);
  --lexxy-color-accent-lightest: rgba(249, 115, 22, 0.1);

  /* Link color */
  --lexxy-color-link: #fb923c;

  /* Selection */
  --lexxy-color-selection: rgba(249, 115, 22, 0.3);
  --lexxy-color-selection-light: rgba(249, 115, 22, 0.15);
  --lexxy-color-selection-hover: rgba(249, 115, 22, 0.4);

  /* Code */
  --lexxy-color-code-background: #292524;
  --lexxy-color-code-text: #fcd34d;

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

  /* Syntax highlighting tokens */
  --lexxy-color-token-attribute: #fcd34d;
  --lexxy-color-token-comment: #78716c;
  --lexxy-color-token-function: #f472b6;
  --lexxy-color-token-operator: #f5f5f4;
  --lexxy-color-token-property: #60a5fa;
  --lexxy-color-token-punctuation: #a8a29e;
  --lexxy-color-token-selector: #4ade80;
  --lexxy-color-token-variable: #c084fc;

  /* Highlights - adjusted for dark mode */
  --lexxy-color-highlight-1: #fef08a;
  --lexxy-color-highlight-2: #bef264;
  --lexxy-color-highlight-3: #6ee7b7;
  --lexxy-color-highlight-4: #67e8f9;
  --lexxy-color-highlight-5: #a5b4fc;
  --lexxy-color-highlight-6: #d8b4fe;
  --lexxy-color-highlight-7: #f9a8d4;
  --lexxy-color-highlight-8: #fda4af;
  --lexxy-color-highlight-9: #fdba74;

  /* Table */
  --lexxy-color-table-header-bg: #292524;
  --lexxy-color-table-cell-border: #44403c;
  --lexxy-color-table-cell-selected: rgba(249, 115, 22, 0.2);

  /* Focus ring */
  --lexxy-focus-ring-color: rgba(249, 115, 22, 0.5);

  /* Borders */
  --lexxy-border-color: #44403c;

  /* 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-border-color);
  color: var(--lexxy-color-text);
}

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

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

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

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

[data-theme="dark"] .lexxy-toolbar button.active {
  background-color: var(--lexxy-color-accent-lighter);
  color: var(--lexxy-color-accent);
}

/* Dropdowns in dark mode */
[data-theme="dark"] .lexxy-dropdown {
  background-color: var(--lexxy-color-canvas-light);
  border-color: var(--lexxy-border-color);
  box-shadow: var(--lexxy-shadow);
}

[data-theme="dark"] .lexxy-dropdown input {
  background-color: var(--lexxy-color-canvas);
  border-color: var(--lexxy-border-color);
  color: var(--lexxy-color-text);
}

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

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

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

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

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

/* 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-border-color);
}

/* Prompt/autocomplete menu */
[data-theme="dark"] .lexxy-prompt-menu {
  background-color: var(--lexxy-color-canvas-light);
  border-color: var(--lexxy-border-color);
  box-shadow: var(--lexxy-shadow);
}

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

[data-theme="dark"] .lexxy-prompt-menu-item.selected {
  background-color: var(--lexxy-color-accent-lighter);
}

/* 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-border-color, #44403c);
}

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

[data-theme="dark"] trix-toolbar button {
  color: var(--lexxy-color-text-muted, #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);
}