/* Rhyme Syntax Highlighting Styles */
.rhyme-code-block {
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--surface-container);
  border: 1px solid var(--outline-variant);
}

.rhyme-code-block pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  background: transparent;
  border: none;
  line-height: 1.5;
  font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.875rem;
}

.rhyme-code-block code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: pre;
}

/* Rhyme Token Styles */
.rhyme-flow-def { 
  color: #ff6b6b; 
  font-weight: bold; 
}

.rhyme-flow-ref { 
  color: #ff6b6b; 
}

.rhyme-element { 
  color: #4dabf7; 
  font-weight: bold; 
}

.rhyme-action { 
  color: #4dabf7; 
}

.rhyme-modifier { 
  color: #74c0fc; 
  font-style: italic; 
}

.rhyme-directive { 
  color: #4dabf7; 
  font-style: italic; 
  text-decoration: underline; 
}

.rhyme-icon, 
.rhyme-image, 
.rhyme-resource { 
  color: #ffa94d; 
}

.rhyme-color, 
.rhyme-font, 
.rhyme-tag, 
.rhyme-sound { 
  color: #da77f2; 
}

.rhyme-variable { 
  color: #ffd43b; 
}

.rhyme-system-var { 
  color: #69db7c; 
}

.rhyme-string, 
.rhyme-number, 
.rhyme-boolean { 
  color: #69db7c; 
}

.rhyme-keyword { 
  color: #da77f2; 
  font-weight: bold; 
}

.rhyme-operator { 
  color: #22d3ee; 
}

.rhyme-comment, 
.rhyme-hash-directive { 
  color: #868e96; 
  font-style: italic; 
}

.rhyme-ref { 
  color: #b197fc; 
}

.rhyme-equals { 
  color: #ffd43b; 
}

/* Dark theme adjustments */
body.dark .rhyme-code-block {
  background-color: var(--surface-container);
}

/* Light theme adjustments */  
body.light .rhyme-flow-def { 
  color: #e03131; 
}

body.light .rhyme-flow-ref { 
  color: #e03131; 
}

body.light .rhyme-element { 
  color: #1971c2; 
}

body.light .rhyme-action { 
  color: #1971c2; 
}

body.light .rhyme-modifier { 
  color: #339af0; 
}

body.light .rhyme-directive { 
  color: #1971c2; 
}

body.light .rhyme-icon, 
body.light .rhyme-image, 
body.light .rhyme-resource { 
  color: #fd7e14; 
}

body.light .rhyme-color, 
body.light .rhyme-font, 
body.light .rhyme-tag, 
body.light .rhyme-sound { 
  color: #9775fa; 
}

body.light .rhyme-variable { 
  color: #fab005; 
}

body.light .rhyme-system-var { 
  color: #37b24d; 
}

body.light .rhyme-string, 
body.light .rhyme-number, 
body.light .rhyme-boolean { 
  color: #37b24d; 
}

body.light .rhyme-keyword { 
  color: #9775fa; 
}

body.light .rhyme-operator { 
  color: #0ea5e9; 
}

body.light .rhyme-comment, 
body.light .rhyme-hash-directive { 
  color: #6c757d; 
}

body.light .rhyme-ref { 
  color: #9775fa; 
}

body.light .rhyme-equals { 
  color: #fab005; 
}

/* Line numbers support */
.rhyme-code-block[data-line-numbers="true"] pre {
  counter-reset: line;
}

.rhyme-code-block[data-line-numbers="true"] pre code {
  counter-increment: line;
}

.rhyme-code-block[data-line-numbers="true"] pre code::before {
  content: counter(line);
  display: inline-block;
  padding-right: 1rem;
  margin-right: 1rem;
  width: 2rem;
  text-align: right;
  color: var(--outline);
  border-right: 1px solid var(--outline-variant);
  user-select: none;
}