/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 */

/* ==========================================================================
   Lexxy in the Nothing design system

   Lexxy ships a light theme driven entirely by CSS variables. Remapping its
   ink scale onto the nd tokens inverts the whole editor and its rendered
   content for OLED black in one move; the rules below then handle the chrome
   that isn't variable-driven. Loaded after lexxy.css so these win.

   The remap must sit on :root: lexxy-variables.css derives a second layer of
   variables (canvas, selected, table) from these on :root, and a derived value
   resolves where it is declared. A theme therefore restates the derived set
   itself rather than moving this block down.
   ========================================================================== */

:root {
  /* Ink scale, inverted: darkest ink becomes lightest text */
  --lexxy-color-ink: var(--color-base-content-muted);
  --lexxy-color-ink-medium: var(--color-base-content-subtle);
  --lexxy-color-ink-light: var(--color-base-content-faint);
  --lexxy-color-ink-lighter: var(--color-base-border-strong);
  --lexxy-color-ink-lightest: var(--color-base-200);
  --lexxy-color-ink-inverted: var(--color-base-300);

  --lexxy-color-accent-dark: var(--color-info);
  --lexxy-color-accent-medium: var(--color-info);
  --lexxy-color-accent-light: color-mix(in srgb, var(--color-info) 28%, transparent);
  --lexxy-color-accent-lightest: color-mix(in srgb, var(--color-info) 15%, transparent);

  --lexxy-color-red: var(--color-error);
  --lexxy-color-green: var(--color-success);
  --lexxy-color-blue: var(--color-info);
  --lexxy-color-purple: var(--color-primary);

  /* Syntax tokens, drawn from the nd palette so code stays in family */
  --lexxy-color-code-token-comment: var(--color-base-content-faint);
  --lexxy-color-code-token-punctuation: var(--color-base-content-subtle);
  --lexxy-color-code-token-operator: var(--color-primary);
  --lexxy-color-code-token-att: var(--color-primary);
  --lexxy-color-code-token-function: var(--color-info);
  --lexxy-color-code-token-property: var(--color-info);
  --lexxy-color-code-token-selector: var(--color-success);
  --lexxy-color-code-token-variable: var(--color-warning);

  --lexxy-font-base: var(--font-body);
  --lexxy-font-mono: var(--font-mono);

  --lexxy-focus-ring-color: var(--color-base-content-muted);
  --lexxy-focus-ring-size: 1px;

  /* Technical radius, no shadows — flat surfaces separated by borders */
  --lexxy-radius: 4px;
  --lexxy-shadow: none;
}

/* Editor chrome — an instrument panel, not a card
   -------------------------------------------------------------------------- */

lexxy-editor {
  background-color: transparent;
  border-color: var(--color-base-border-strong);
  transition: border-color 200ms var(--ease-standard);

  /* Matches .nd-input:focus */
  &:focus-within {
    border-color: var(--color-base-content-muted);
  }
}

lexxy-toolbar {
  border-block-end-color: var(--color-base-border);
  color: var(--color-base-content-subtle);

  .lexxy-editor__toolbar-button:hover {
    color: var(--color-base-content);
  }
}

/* Menus float on black, and the system has no shadows — a border does the lifting */
.lexxy-editor__toolbar-dropdown-list,
.lexxy-prompt-menu,
.lexxy-table-control__more-menu {
  border: 1px solid var(--color-base-border-strong);
}

/* Placeholder reads like .nd-input::placeholder */
.lexxy-editor--empty .lexxy-editor__content::before {
  color: var(--color-base-content-faint);
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 1;
}

/* Rendered content — prose that sits under the bug title.
   Heading sizes stay below the page title so the hierarchy holds.
   -------------------------------------------------------------------------- */

.lexxy-content {
  color: var(--color-base-content-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-base-content);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-block: 1.5rem 0.5rem;

    &:first-child {
      margin-block-start: 0;
    }
  }

  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.125rem; }
  h3, h4, h5, h6 { font-size: 1rem; }

  a {
    color: var(--color-info);
    text-decoration: none;

    &:hover {
      color: var(--color-base-content-muted);
    }
  }

  blockquote {
    border-inline-start: 1px solid var(--color-base-border-strong);
    color: var(--color-base-content-subtle);
    padding-inline-start: 1rem;
  }

  code, pre {
    font-family: var(--font-mono);
    font-size: 13px;
  }

  code {
    color: var(--color-primary);
  }

  pre {
    background-color: var(--color-base-200);
    border: 1px solid var(--color-base-border);
    border-radius: var(--lexxy-radius);
    padding: 12px 16px;

    code {
      color: var(--color-base-content-muted);
    }
  }

  hr {
    border-color: var(--color-base-border);
  }

  th, td {
    border-color: var(--color-base-border-strong);
  }

  th {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .attachment img {
    border: 1px solid var(--color-base-border);
    border-radius: 8px;
  }

  figcaption {
    color: var(--color-base-content-faint);
    font-family: var(--font-mono);
    font-size: 11px;
  }
}

/* ==========================================================================
   Lexxy in a palette theme. The remap above sits on :root, and lexxy-variables.css
   derives canvas, selection and table colours there from its own :root values — so a
   theme that redefines an nd token on the body never reaches them. Restating the
   derived set on the body fixes every palette theme at once; a theme that paints Lexxy
   in its own colours (kitsch) overrides this from its own sheet, which loads later.
   ========================================================================== */

body[data-theme] :is(lexxy-editor, .lexxy-content) {
  --lexxy-color-ink: var(--color-base-content-muted);
  --lexxy-color-ink-medium: var(--color-base-content-subtle);
  --lexxy-color-ink-light: var(--color-base-content-faint);
  --lexxy-color-ink-lighter: var(--color-base-border-strong);
  --lexxy-color-ink-lightest: var(--color-base-200);
  --lexxy-color-ink-inverted: var(--color-base-300);

  --lexxy-color-canvas: var(--color-base-200);
  --lexxy-color-text: var(--color-base-content-muted);
  --lexxy-color-text-subtle: var(--color-base-content-subtle);
  --lexxy-color-link: var(--color-info);
  --lexxy-color-selected: var(--color-primary-subtle);
  --lexxy-color-selected-hover: var(--color-primary);
  --lexxy-color-selected-dark: var(--color-primary-content);
  --lexxy-color-code-bg: var(--color-base-100);

  --lexxy-color-table-header-bg: var(--color-base-100);
  --lexxy-color-table-cell-border: var(--color-base-border-strong);
  --lexxy-color-table-cell-selected: var(--color-primary-subtle);
  --lexxy-color-table-cell-selected-border: var(--color-primary);
  --lexxy-color-table-cell-selected-bg: var(--color-primary-subtle);
  --lexxy-color-table-cell-toggle: var(--color-primary);

  --lexxy-color-accent-dark: var(--color-info);
  --lexxy-color-accent-medium: var(--color-info);
  --lexxy-color-accent-light: color-mix(in srgb, var(--color-info) 28%, transparent);
  --lexxy-color-accent-lightest: color-mix(in srgb, var(--color-info) 15%, transparent);

  --lexxy-focus-ring-color: var(--color-primary);
}