/*
 * Lexxy dark theme overrides for OG1
 * Override Lexxy CSS variables to match OG1's dark theme.
 * See lexxy-variables.css in the gem for all available variables.
 */

:root {
  /* Canvas and text */
  --lexxy-color-canvas: var(--color-surface);
  --lexxy-color-text: var(--color-text);
  --lexxy-color-text-subtle: var(--color-text-muted);
  --lexxy-color-link: var(--color-accent);

  /* Ink scale — dark theme inverted */
  --lexxy-color-ink: #e5e5e5;
  --lexxy-color-ink-medium: #a0a0a0;
  --lexxy-color-ink-light: #6b6b6b;
  --lexxy-color-ink-lighter: #3a3a3a;
  --lexxy-color-ink-lightest: #1e2127;
  --lexxy-color-ink-inverted: #0c0e12;

  /* Selection */
  --lexxy-color-selected: rgba(225, 38, 38, 0.15);
  --lexxy-color-selected-hover: rgba(225, 38, 38, 0.25);
  --lexxy-color-selected-dark: var(--color-accent);

  /* Code blocks */
  --lexxy-color-code-bg: #1e2127;
  --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: #c9d1d9;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  /* Tables */
  --lexxy-color-table-header-bg: #1e2127;
  --lexxy-color-table-cell-border: var(--color-border);

  /* Focus ring */
  --lexxy-focus-ring-color: var(--color-accent);

  /* Shadow */
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Editor container */
lexxy-editor {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 5px !important;
  color: var(--color-text) !important;
  min-height: 200px;
}

/* Toolbar */
lexxy-toolbar {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 5px 5px 0 0;
}

lexxy-toolbar button {
  color: var(--color-text-secondary) !important;
}

lexxy-toolbar button:hover {
  color: var(--color-text) !important;
  background-color: var(--color-surface-raised) !important;
}

lexxy-toolbar button[aria-pressed="true"] {
  color: var(--color-accent) !important;
  background-color: rgba(225, 38, 38, 0.1) !important;
}

/* Content area */
.lexxy-content {
  color: var(--color-text-secondary);
}

.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3 {
  color: var(--color-text);
}

.lexxy-content a {
  color: var(--color-accent);
}

/* Placeholder text */
lexxy-editor [data-placeholder]::before {
  color: var(--color-text-muted) !important;
}

/* ActionText attachment images */
.lexxy-content .attachment {
  margin: 0.75rem 0;
}

.lexxy-content .attachment img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* In post cards — constrain image height */
.max-h-48 .attachment img {
  max-height: 12rem;
}

/* Toolbar dropdowns and overflow menus */
lexxy-toolbar [role="listbox"],
lexxy-toolbar [role="menu"],
lexxy-toolbar [data-tippy-root],
lexxy-toolbar .tippy-box,
lexxy-toolbar .tippy-content {
  background-color: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 5px !important;
  color: var(--color-text) !important;
}

/* Overflow/more button */
lexxy-toolbar button[aria-expanded="true"] {
  background-color: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
}

/* Dropdown items */
lexxy-toolbar [role="option"],
lexxy-toolbar [role="menuitem"] {
  color: var(--color-text-secondary) !important;
}

lexxy-toolbar [role="option"]:hover,
lexxy-toolbar [role="menuitem"]:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text) !important;
}

lexxy-toolbar [role="option"][aria-selected="true"],
lexxy-toolbar [role="menuitem"][aria-selected="true"] {
  color: var(--color-accent) !important;
}

/* Color picker swatches — ensure visible borders */
lexxy-toolbar [data-color] {
  border-radius: 3px !important;
  border: 1px solid var(--color-border) !important;
}

/* Toolbar separator lines */
lexxy-toolbar [role="separator"] {
  background-color: var(--color-border) !important;
}

/* Hide color highlight picker — not needed for OG1 content */
lexxy-toolbar details:has(> summary[title="Color highlight"]) {
  display: none !important;
}

/* Toolbar spacer (flex-grow area before overflow menu) — must be invisible */
lexxy-toolbar .lexxy-editor__toolbar-spacer {
  background-color: transparent !important;
}

/* Hide dropdown-only buttons (color swatches, heading options, link/unlink) that leak into toolbar */
lexxy-toolbar button:not([title]):not([aria-label]):not([aria-expanded]) {
  display: none !important;
}

/* Hide empty action-text-attachment wrappers */
action-text-attachment {
  display: block;
}

/* Hide toolbar for posts — keyboard shortcuts still work */
.toolbar-hidden lexxy-toolbar {
  display: none !important;
}