/*
 * 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.
 */

@import url("/assets/lexxy-f326a350.css");
@import url("/assets/logo-bac30d96.css");

/* Nudge the lexxy rich text editor toward the app's own palette instead of its default theme. */
:root {
  --lexxy-color-ink: #211A15;
  --lexxy-color-ink-medium: #4A403A;
  --lexxy-color-ink-light: #6B5F55;
  --lexxy-color-ink-lighter: #DDD1BE;
  --lexxy-color-ink-lightest: #F5EFE4;
  --lexxy-color-accent-dark: #8C4A33;
  --lexxy-color-accent-medium: #C6A882;
  --lexxy-color-accent-light: #EDE4D4;
  --lexxy-color-accent-lightest: #F5EFE4;
  --lexxy-font-base: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --lexxy-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --lexxy-radius: 3px;
}

lexxy-editor {
  min-height: 6.5em;
  border: 1px solid #D8CCB9;
  border-radius: 3px;
  padding: 0.6em 0.75em;
  background: #FFFDF9;
}

lexxy-editor:focus-within {
  outline: none;
  border-color: #8C4A33;
  box-shadow: 0 0 0 3px rgba(140, 74, 51, 0.15);
}

/* lexxy only themes the toolbar's pressed/active state via CSS variables above —
   the resting and hover states of each <button> are left to the browser's native
   button styling, which renders as a stark white box. Override those explicitly. */
lexxy-toolbar {
  background: #FFFDF9;
}

lexxy-toolbar .lexxy-editor__toolbar-button {
  background-color: transparent;
  color: #6B5F55;
}

lexxy-toolbar .lexxy-editor__toolbar-button:hover:not([aria-pressed="true"]):not(:active) {
  background-color: #F5EFE4;
  color: #211A15;
}