/*
 * Lexxy overrides for iRacePlan.
 *
 * 1. Dark mode variable overrides (zinc theme)
 * 2. Tailwind preflight specificity fixes — Lexxy uses :where() (0 specificity)
 *    which Tailwind's preflight resets beat. We re-apply styles scoped to
 *    lexxy-editor and .lexxy-content so they win.
 */

/* -------------------------------------------------------------------------
 * 1. Dark mode variable overrides
 * ------------------------------------------------------------------------- */

:root {
  --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-content-margin: 0rem;

  --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);
}

/* -------------------------------------------------------------------------
 * 2. Restore element styles stripped by Tailwind preflight
 *    Scoped to lexxy-editor (editing) and .lexxy-content (display)
 * ------------------------------------------------------------------------- */

lexxy-editor,
.lexxy-content {

  /* Headings */
  h1 {
    font-size: 2rem;
    font-weight: bold;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: bold;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: bold;
  }

  h4 {
    font-size: 1rem;
    font-weight: bold;
  }

  p {
    color: var(--lexxy-color-ink) !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: 0 var(--lexxy-content-margin, 1rem);
    overflow-wrap: break-word;
  }

  /* Block elements */
  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  .attachment {
    margin-block: 0 var(--lexxy-content-margin, 1rem);
  }

  /* Lists */
  ul {
    list-style-type: disc;
    padding-inline-start: 1.5rem;
  }

  ol {
    list-style-type: decimal;
    padding-inline-start: 1.5rem;
  }

  li {
    margin-bottom: 0.25rem;
  }

  /* Blockquote */
  blockquote {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    padding: 0.5em 2ch;
    margin: var(--lexxy-content-margin, 1rem) 0;
  }

  /* Inline formatting — Tailwind resets text-decoration */
  .lexxy-content__strikethrough {
    text-decoration: line-through;
  }

  .lexxy-content__underline {
    text-decoration: underline;
  }

  .lexxy-content__bold {
    font-weight: bold;
  }

  .lexxy-content__italic {
    font-style: italic;
  }

  /* Links */
  a {
    color: var(--lexxy-color-link, var(--lexxy-color-accent-dark));
    text-decoration: underline;
  }

  /* Code */
  code,
  pre {
    background-color: var(--lexxy-color-code-bg, var(--lexxy-color-ink-lightest));
    border-radius: var(--lexxy-radius, 0.5ch);
    font-family: var(--lexxy-font-mono, ui-monospace, monospace);
    font-size: 0.9em;
  }

  code {
    padding: 0.25ch 0.5ch;
  }

  /* Multi-line code blocks: Lexxy uses <code data-language> OR <pre> */
  pre,
  code[data-language] {
    display: block;
    hyphens: none;
    margin-block: 0 var(--lexxy-content-margin, 1rem);
    overflow-x: auto;
    padding: 1ch;
    tab-size: 2;
    white-space: pre;
    word-break: break-word;
  }

  /* Media */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid var(--lexxy-color-table-cell-border, var(--lexxy-color-ink-lighter));
    padding: 1ch;
    text-align: start;
  }

  th {
    background-color: var(--lexxy-color-table-header-bg, var(--lexxy-color-ink-lightest));
    font-weight: bold;
  }

  /* Horizontal rule */
  hr {
    border: 0;
    border-bottom: 1px solid currentColor;
    margin: 1rem 0;
  }
}

/* Toolbar buttons — Tailwind resets button backgrounds */
lexxy-editor button,
lexxy-editor summary {
  cursor: pointer;
}

lexxy-editor .lexxy-editor__toolbar-button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: currentColor;
}

lexxy-editor .lexxy-editor__toolbar-button svg {
  fill: currentColor;
}