@layer components {
/* Syntax highlighting via shiki dual themes (github-light / github-dark).
 * Shiki outputs inline styles with the light theme as direct CSS properties
 * and dark theme values as --shiki-dark-* CSS variables.
 * We override with the dark variables when .dark class is active.
 *
 * Note: prosemirror-highlight sets --shiki-dark-bg on the code block wrapper
 * as a passive CSS variable. We intentionally do NOT apply it to token spans;
 * the code block background is controlled by the app's own theme CSS.
 */

/* Light mode: shiki's inline color/font-style applies directly — no CSS needed */

/* Dark mode (Ink) — activate --shiki-dark CSS variables */
.dark .shiki {
  color: var(--shiki-dark) !important;
  font-style: var(--shiki-dark-font-style, normal) !important;
  font-weight: var(--shiki-dark-font-weight, normal) !important;
  text-decoration: var(--shiki-dark-text-decoration, none) !important;
}

}
