@layer components {
  /* Rouge syntax highlighting - using centralized code token colors */
  .highlight {
    background: var(--color-ink-lightest);
    border-radius: var(--border-radius);
    overflow-x: auto;
  }

  .highlight pre {
    margin: 0;
    padding: var(--block-space);
  }

  /* Comments */
  .highlight .c,
  .highlight .cd,
  .highlight .cm,
  .highlight .c1,
  .highlight .cs {
    color: var(--color-code-token__comment);
    font-style: italic;
  }

  /* Keywords */
  .highlight .k,
  .highlight .kc,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt {
    color: var(--color-code-token__keyword);
  }

  /* Strings */
  .highlight .s,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .s2,
  .highlight .se,
  .highlight .sh,
  .highlight .si,
  .highlight .sx,
  .highlight .sr,
  .highlight .s1,
  .highlight .ss {
    color: var(--color-code-token__string);
  }

  /* Names - attributes, classes, functions, decorators */
  .highlight .na,
  .highlight .nc,
  .highlight .nd,
  .highlight .nf,
  .highlight .nl,
  .highlight .nn {
    color: var(--color-code-token__function);
  }

  /* Names - builtins, constants */
  .highlight .nb,
  .highlight .no {
    color: var(--color-code-token__att);
  }

  /* Names - entity, punctuation */
  .highlight .ni,
  .highlight .p {
    color: var(--color-code-token__punctuation);
  }

  /* Names - tags */
  .highlight .nt {
    color: var(--color-code-token__selector);
  }

  /* Names - variables */
  .highlight .nv {
    color: var(--color-code-token__variable);
  }

  /* Operators */
  .highlight .o,
  .highlight .ow {
    color: var(--color-code-token__operator);
  }

  /* Numbers */
  .highlight .m,
  .highlight .mb,
  .highlight .mf,
  .highlight .mh,
  .highlight .mi,
  .highlight .mo {
    color: var(--color-code-token__att);
  }
}