/* Lexxy dark mode — based on official 37signals sandbox dark theme.
   Adapted from prefers-color-scheme to Tailwind's .dark class selector.
   Source: https://github.com/basecamp/lexxy/blob/main/test/dummy/app/assets/stylesheets/sandbox.css */

.dark {
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(40% 0 0);
  --lexxy-color-ink-lightest: oklch(25% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  --lexxy-color-accent-dark: oklch(70% 0.30 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(45% 0.04 254);
  --lexxy-color-accent-lightest: oklch(35% 0.04 254);

  --lexxy-color-red: oklch(70% 0.15 27);
  --lexxy-color-green: oklch(70% 0.15 145);
  --lexxy-color-blue: oklch(75% 0.196 258);
  --lexxy-color-purple: oklch(70% 0.15 305);

  --lexxy-color-code-token-att: #ff7b72;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #f0f6fc;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  --lexxy-color-canvas: oklch(18% 0 0);
  --lexxy-color-selected: oklch(30% 0.03 254);
  --lexxy-color-selected-hover: oklch(35% 0.04 254);
  --lexxy-color-code-bg: oklch(22% 0 0);
  --lexxy-color-table-header-bg: oklch(22% 0 0);
  --lexxy-color-table-cell-border: oklch(32% 0 0);
  --lexxy-focus-ring-color: oklch(60% 0.19 260);

  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);

  --highlight-1: rgb(240, 200, 22);
  --highlight-2: rgb(230, 118, 14);
  --highlight-3: rgb(244, 5, 5);
  --highlight-4: rgb(248, 21, 192);
  --highlight-5: rgb(214, 80, 255);
  --highlight-6: rgb(53, 157, 255);
  --highlight-7: rgb(26, 231, 23);
  --highlight-8: rgb(201, 135, 72);
  --highlight-9: rgb(161, 161, 161);
}

/* Toolbar icons — SVGs use implicit fill:black, force to currentColor */
.dark lexxy-toolbar {
  color: oklch(90% 0 0);
}

/* Force all SVG icons in toolbar to use text color — Lexxy SVGs lack fill="currentColor" */
.dark lexxy-toolbar button svg path,
.dark lexxy-toolbar summary svg path,
.dark lexxy-toolbar details svg path,
.dark .lexxy-editor__toolbar-dropdown-list svg path,
.dark .lexxy-editor__toolbar-dropdown-content svg path {
  fill: currentColor !important;
}

/* Sticky toolbar — stays visible when scrolling long editor content */
lexxy-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--lexxy-color-canvas);
}

/* Focus ring uses CI primary color instead of Lexxy default blue */
lexxy-editor {
  --lexxy-focus-ring-color: #C47D2E;
}

.dark lexxy-editor {
  --lexxy-focus-ring-color: #D4943F;
}

/* Chevron dropdown button borders — too bright in dark mode without this */
.dark .lexxy-editor__toolbar-dropdown--chevron > summary {
  border-color: oklch(35% 0 0);
}

/* Editor content area — match admin dark bg */
.dark lexxy-editor .lexxy-editor__content {
  background-color: oklch(18% 0 0);
  color: oklch(90% 0 0);
}

/* Placeholder text */
.dark lexxy-editor .lexxy-editor__content [data-placeholder]::before {
  color: oklch(50% 0 0);
}

/* Table overrides — must be outside @layer to override Lexxy's own CSS */
lexxy-editor action-text-attachment[content-type="application/vnd.trix.table"] {
  display: block;
  margin: 1em 0 2em;
}

/* Lexxy tables: all header cells look normal by default */
lexxy-editor th.lexxy-content__table-cell--header {
  background-color: transparent !important;
  font-weight: normal !important;
  color: inherit !important;
}

/* Only the first row gets header styling (first-of-type because colgroup comes before) */
lexxy-editor tr:first-of-type th.lexxy-content__table-cell--header {
  background-color: #f3f4f6 !important;
  font-weight: 600 !important;
  color: #111827 !important;
  border-bottom: 2px solid #e5e7eb !important;
}
.dark lexxy-editor tr:first-of-type th.lexxy-content__table-cell--header {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-bottom-color: #4b5563 !important;
}