/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

*= require lexxy
*= require dialog

.lexxy-content {
  --lexxy-color-canvas: oklch(21% 0.01 264);
  --lexxy-color-text: oklch(92% 0.01 264);
  --lexxy-color-text-subtle: oklch(72% 0.01 264);
  --lexxy-color-link: oklch(78% 0.14 258);
  --lexxy-color-selected: oklch(32% 0.06 258);
  --lexxy-color-selected-hover: oklch(38% 0.08 258);
  --lexxy-color-selected-dark: oklch(70% 0.15 258);
  --lexxy-color-code-bg: oklch(26% 0.01 264);

  --lexxy-color-ink-lightest: oklch(28% 0.01 264);
  --lexxy-color-ink-lighter: oklch(38% 0.01 264);
  --lexxy-color-table-header-bg: oklch(26% 0.01 264);
  --lexxy-color-table-cell-border: oklch(44% 0.01 264);
  --lexxy-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);

  --lexxy-color-code-token-comment: #94a3b8;
  --lexxy-color-code-token-property: #93c5fd;
  --lexxy-color-code-token-function: #c4b5fd;
  --lexxy-color-code-token-att: #fca5a5;
  --lexxy-color-code-token-operator: #fda4af;
  --lexxy-color-code-token-selector: #86efac;
  --lexxy-color-code-token-variable: #fdba74;
  --lexxy-color-code-token-punctuation: #e2e8f0;
}

.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  color: var(--lexxy-color-text) !important;
}

/* Keep the web-console stuck to the bottom of the viewport */
.console-outer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}