/* ============================================================
   themes.css — 10 Syntax Highlighting Themes for Code Formatter
   Prism.js-compatible token classes
   Applied via [data-theme="<name>"] on .output-panel
   ============================================================ */

/* ---- Global Transition (200ms on theme change) ---- */

.output-panel,
.output-panel .output-gutter,
.output-panel .output-code,
.output-panel pre,
.output-panel pre > code,
.output-panel .token {
  transition: color 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease;
}

/* ============================================================
   1. Monokai
   ============================================================ */

.output-panel[data-theme="monokai"] {
  background-color: #272822;
  color: #f8f8f2;
}

.output-panel[data-theme="monokai"] .output-gutter {
  background-color: #1e1e1e;
  color: #75715E;
}

.output-panel[data-theme="monokai"] .output-code {
  background-color: #272822;
}

.output-panel[data-theme="monokai"] pre > code {
  color: #f8f8f2;
}

.output-panel[data-theme="monokai"] pre > code::selection,
.output-panel[data-theme="monokai"] pre > code *::selection {
  background-color: #49483E;
}

.output-panel[data-theme="monokai"] .line-highlight {
  background-color: #3E3D32;
}

.output-panel[data-theme="monokai"] .token.keyword {
  color: #F92672;
}

.output-panel[data-theme="monokai"] .token.string,
.output-panel[data-theme="monokai"] .token.attr-value {
  color: #E6DB74;
}

.output-panel[data-theme="monokai"] .token.number,
.output-panel[data-theme="monokai"] .token.boolean {
  color: #AE81FF;
}

.output-panel[data-theme="monokai"] .token.comment {
  color: #75715E;
}

.output-panel[data-theme="monokai"] .token.function {
  color: #66D9EF;
}

.output-panel[data-theme="monokai"] .token.property,
.output-panel[data-theme="monokai"] .token.attr-name {
  color: #A6E22E;
}

.output-panel[data-theme="monokai"] .token.tag {
  color: #F92672;
}

.output-panel[data-theme="monokai"] .token.operator {
  color: #F92672;
}

.output-panel[data-theme="monokai"] .token.punctuation {
  color: #f8f8f2;
}

/* ============================================================
   2. GitHub Light
   ============================================================ */

.output-panel[data-theme="github-light"] {
  background-color: #fff;
  color: #24292e;
}

.output-panel[data-theme="github-light"] .output-gutter {
  background-color: #f6f8fa;
  color: #959da5;
}

.output-panel[data-theme="github-light"] .output-code {
  background-color: #fff;
}

.output-panel[data-theme="github-light"] pre > code {
  color: #24292e;
}

.output-panel[data-theme="github-light"] pre > code::selection,
.output-panel[data-theme="github-light"] pre > code *::selection {
  background-color: #c8e1ff;
}

.output-panel[data-theme="github-light"] .line-highlight {
  background-color: #fffbdd;
}

.output-panel[data-theme="github-light"] .token.keyword {
  color: #d73a49;
}

.output-panel[data-theme="github-light"] .token.string,
.output-panel[data-theme="github-light"] .token.attr-value {
  color: #032f62;
}

.output-panel[data-theme="github-light"] .token.number,
.output-panel[data-theme="github-light"] .token.boolean {
  color: #005cc5;
}

.output-panel[data-theme="github-light"] .token.comment {
  color: #6a737d;
}

.output-panel[data-theme="github-light"] .token.function {
  color: #6f42c1;
}

.output-panel[data-theme="github-light"] .token.property,
.output-panel[data-theme="github-light"] .token.attr-name {
  color: #005cc5;
}

.output-panel[data-theme="github-light"] .token.tag {
  color: #22863a;
}

.output-panel[data-theme="github-light"] .token.operator {
  color: #d73a49;
}

.output-panel[data-theme="github-light"] .token.punctuation {
  color: #24292e;
}

/* ============================================================
   3. GitHub Dark
   ============================================================ */

.output-panel[data-theme="github-dark"] {
  background-color: #0d1117;
  color: #c9d1d9;
}

.output-panel[data-theme="github-dark"] .output-gutter {
  background-color: #010409;
  color: #484f58;
}

.output-panel[data-theme="github-dark"] .output-code {
  background-color: #0d1117;
}

.output-panel[data-theme="github-dark"] pre > code {
  color: #c9d1d9;
}

.output-panel[data-theme="github-dark"] pre > code::selection,
.output-panel[data-theme="github-dark"] pre > code *::selection {
  background-color: #264f78;
}

.output-panel[data-theme="github-dark"] .line-highlight {
  background-color: #161b22;
}

.output-panel[data-theme="github-dark"] .token.keyword {
  color: #ff7b72;
}

.output-panel[data-theme="github-dark"] .token.string,
.output-panel[data-theme="github-dark"] .token.attr-value {
  color: #a5d6ff;
}

.output-panel[data-theme="github-dark"] .token.number,
.output-panel[data-theme="github-dark"] .token.boolean {
  color: #79c0ff;
}

.output-panel[data-theme="github-dark"] .token.comment {
  color: #8b949e;
}

.output-panel[data-theme="github-dark"] .token.function {
  color: #d2a8ff;
}

.output-panel[data-theme="github-dark"] .token.property,
.output-panel[data-theme="github-dark"] .token.attr-name {
  color: #79c0ff;
}

.output-panel[data-theme="github-dark"] .token.tag {
  color: #7ee787;
}

.output-panel[data-theme="github-dark"] .token.operator {
  color: #ff7b72;
}

.output-panel[data-theme="github-dark"] .token.punctuation {
  color: #c9d1d9;
}

/* ============================================================
   4. Dracula
   ============================================================ */

.output-panel[data-theme="dracula"] {
  background-color: #282a36;
  color: #f8f8f2;
}

.output-panel[data-theme="dracula"] .output-gutter {
  background-color: #21222c;
  color: #6272a4;
}

.output-panel[data-theme="dracula"] .output-code {
  background-color: #282a36;
}

.output-panel[data-theme="dracula"] pre > code {
  color: #f8f8f2;
}

.output-panel[data-theme="dracula"] pre > code::selection,
.output-panel[data-theme="dracula"] pre > code *::selection {
  background-color: #44475a;
}

.output-panel[data-theme="dracula"] .line-highlight {
  background-color: #44475a;
}

.output-panel[data-theme="dracula"] .token.keyword {
  color: #ff79c6;
}

.output-panel[data-theme="dracula"] .token.string,
.output-panel[data-theme="dracula"] .token.attr-value {
  color: #f1fa8c;
}

.output-panel[data-theme="dracula"] .token.number,
.output-panel[data-theme="dracula"] .token.boolean {
  color: #bd93f9;
}

.output-panel[data-theme="dracula"] .token.comment {
  color: #6272a4;
}

.output-panel[data-theme="dracula"] .token.function {
  color: #50fa7b;
}

.output-panel[data-theme="dracula"] .token.property,
.output-panel[data-theme="dracula"] .token.attr-name {
  color: #50fa7b;
}

.output-panel[data-theme="dracula"] .token.tag {
  color: #ff79c6;
}

.output-panel[data-theme="dracula"] .token.operator {
  color: #ff79c6;
}

.output-panel[data-theme="dracula"] .token.punctuation {
  color: #f8f8f2;
}

/* ============================================================
   5. One Dark
   ============================================================ */

.output-panel[data-theme="one-dark"] {
  background-color: #282c34;
  color: #abb2bf;
}

.output-panel[data-theme="one-dark"] .output-gutter {
  background-color: #21252b;
  color: #495162;
}

.output-panel[data-theme="one-dark"] .output-code {
  background-color: #282c34;
}

.output-panel[data-theme="one-dark"] pre > code {
  color: #abb2bf;
}

.output-panel[data-theme="one-dark"] pre > code::selection,
.output-panel[data-theme="one-dark"] pre > code *::selection {
  background-color: #3e4451;
}

.output-panel[data-theme="one-dark"] .line-highlight {
  background-color: #2c313a;
}

.output-panel[data-theme="one-dark"] .token.keyword {
  color: #c678dd;
}

.output-panel[data-theme="one-dark"] .token.string,
.output-panel[data-theme="one-dark"] .token.attr-value {
  color: #98c379;
}

.output-panel[data-theme="one-dark"] .token.number,
.output-panel[data-theme="one-dark"] .token.boolean {
  color: #d19a66;
}

.output-panel[data-theme="one-dark"] .token.comment {
  color: #5c6370;
}

.output-panel[data-theme="one-dark"] .token.function {
  color: #61afef;
}

.output-panel[data-theme="one-dark"] .token.property,
.output-panel[data-theme="one-dark"] .token.attr-name {
  color: #e06c75;
}

.output-panel[data-theme="one-dark"] .token.tag {
  color: #e06c75;
}

.output-panel[data-theme="one-dark"] .token.operator {
  color: #56b6c2;
}

.output-panel[data-theme="one-dark"] .token.punctuation {
  color: #abb2bf;
}

/* ============================================================
   6. Solarized Light
   ============================================================ */

.output-panel[data-theme="solarized-light"] {
  background-color: #fdf6e3;
  color: #657b83;
}

.output-panel[data-theme="solarized-light"] .output-gutter {
  background-color: #eee8d5;
  color: #93a1a1;
}

.output-panel[data-theme="solarized-light"] .output-code {
  background-color: #fdf6e3;
}

.output-panel[data-theme="solarized-light"] pre > code {
  color: #657b83;
}

.output-panel[data-theme="solarized-light"] pre > code::selection,
.output-panel[data-theme="solarized-light"] pre > code *::selection {
  background-color: #d1cbaf;
}

.output-panel[data-theme="solarized-light"] .line-highlight {
  background-color: #eee8d5;
}

.output-panel[data-theme="solarized-light"] .token.keyword {
  color: #859900;
}

.output-panel[data-theme="solarized-light"] .token.string,
.output-panel[data-theme="solarized-light"] .token.attr-value {
  color: #2aa198;
}

.output-panel[data-theme="solarized-light"] .token.number,
.output-panel[data-theme="solarized-light"] .token.boolean {
  color: #d33682;
}

.output-panel[data-theme="solarized-light"] .token.comment {
  color: #93a1a1;
}

.output-panel[data-theme="solarized-light"] .token.function {
  color: #268bd2;
}

.output-panel[data-theme="solarized-light"] .token.property,
.output-panel[data-theme="solarized-light"] .token.attr-name {
  color: #268bd2;
}

.output-panel[data-theme="solarized-light"] .token.tag {
  color: #cb4b16;
}

.output-panel[data-theme="solarized-light"] .token.operator {
  color: #657b83;
}

.output-panel[data-theme="solarized-light"] .token.punctuation {
  color: #657b83;
}

/* ============================================================
   7. Solarized Dark
   ============================================================ */

.output-panel[data-theme="solarized-dark"] {
  background-color: #002b36;
  color: #839496;
}

.output-panel[data-theme="solarized-dark"] .output-gutter {
  background-color: #00212b;
  color: #586e75;
}

.output-panel[data-theme="solarized-dark"] .output-code {
  background-color: #002b36;
}

.output-panel[data-theme="solarized-dark"] pre > code {
  color: #839496;
}

.output-panel[data-theme="solarized-dark"] pre > code::selection,
.output-panel[data-theme="solarized-dark"] pre > code *::selection {
  background-color: #073642;
}

.output-panel[data-theme="solarized-dark"] .line-highlight {
  background-color: #073642;
}

.output-panel[data-theme="solarized-dark"] .token.keyword {
  color: #859900;
}

.output-panel[data-theme="solarized-dark"] .token.string,
.output-panel[data-theme="solarized-dark"] .token.attr-value {
  color: #2aa198;
}

.output-panel[data-theme="solarized-dark"] .token.number,
.output-panel[data-theme="solarized-dark"] .token.boolean {
  color: #d33682;
}

.output-panel[data-theme="solarized-dark"] .token.comment {
  color: #586e75;
}

.output-panel[data-theme="solarized-dark"] .token.function {
  color: #268bd2;
}

.output-panel[data-theme="solarized-dark"] .token.property,
.output-panel[data-theme="solarized-dark"] .token.attr-name {
  color: #268bd2;
}

.output-panel[data-theme="solarized-dark"] .token.tag {
  color: #cb4b16;
}

.output-panel[data-theme="solarized-dark"] .token.operator {
  color: #839496;
}

.output-panel[data-theme="solarized-dark"] .token.punctuation {
  color: #839496;
}

/* ============================================================
   8. Nord
   ============================================================ */

.output-panel[data-theme="nord"] {
  background-color: #2e3440;
  color: #d8dee9;
}

.output-panel[data-theme="nord"] .output-gutter {
  background-color: #272c36;
  color: #4c566a;
}

.output-panel[data-theme="nord"] .output-code {
  background-color: #2e3440;
}

.output-panel[data-theme="nord"] pre > code {
  color: #d8dee9;
}

.output-panel[data-theme="nord"] pre > code::selection,
.output-panel[data-theme="nord"] pre > code *::selection {
  background-color: #434c5e;
}

.output-panel[data-theme="nord"] .line-highlight {
  background-color: #3b4252;
}

.output-panel[data-theme="nord"] .token.keyword {
  color: #81a1c1;
}

.output-panel[data-theme="nord"] .token.string,
.output-panel[data-theme="nord"] .token.attr-value {
  color: #a3be8c;
}

.output-panel[data-theme="nord"] .token.number,
.output-panel[data-theme="nord"] .token.boolean {
  color: #b48ead;
}

.output-panel[data-theme="nord"] .token.comment {
  color: #4c566a;
}

.output-panel[data-theme="nord"] .token.function {
  color: #88c0d0;
}

.output-panel[data-theme="nord"] .token.property,
.output-panel[data-theme="nord"] .token.attr-name {
  color: #88c0d0;
}

.output-panel[data-theme="nord"] .token.tag {
  color: #81a1c1;
}

.output-panel[data-theme="nord"] .token.operator {
  color: #81a1c1;
}

.output-panel[data-theme="nord"] .token.punctuation {
  color: #eceff4;
}

/* ============================================================
   9. Tomorrow Night
   ============================================================ */

.output-panel[data-theme="tomorrow-night"] {
  background-color: #1d1f21;
  color: #c5c8c6;
}

.output-panel[data-theme="tomorrow-night"] .output-gutter {
  background-color: #1a1c1e;
  color: #969896;
}

.output-panel[data-theme="tomorrow-night"] .output-code {
  background-color: #1d1f21;
}

.output-panel[data-theme="tomorrow-night"] pre > code {
  color: #c5c8c6;
}

.output-panel[data-theme="tomorrow-night"] pre > code::selection,
.output-panel[data-theme="tomorrow-night"] pre > code *::selection {
  background-color: #373b41;
}

.output-panel[data-theme="tomorrow-night"] .line-highlight {
  background-color: #282a2e;
}

.output-panel[data-theme="tomorrow-night"] .token.keyword {
  color: #b294bb;
}

.output-panel[data-theme="tomorrow-night"] .token.string,
.output-panel[data-theme="tomorrow-night"] .token.attr-value {
  color: #b5bd68;
}

.output-panel[data-theme="tomorrow-night"] .token.number,
.output-panel[data-theme="tomorrow-night"] .token.boolean {
  color: #de935f;
}

.output-panel[data-theme="tomorrow-night"] .token.comment {
  color: #969896;
}

.output-panel[data-theme="tomorrow-night"] .token.function {
  color: #81a2be;
}

.output-panel[data-theme="tomorrow-night"] .token.property,
.output-panel[data-theme="tomorrow-night"] .token.attr-name {
  color: #cc6666;
}

.output-panel[data-theme="tomorrow-night"] .token.tag {
  color: #cc6666;
}

.output-panel[data-theme="tomorrow-night"] .token.operator {
  color: #8abeb7;
}

.output-panel[data-theme="tomorrow-night"] .token.punctuation {
  color: #c5c8c6;
}

/* ============================================================
   10. VS Code Dark (Default)
   ============================================================ */

.output-panel[data-theme="vscode-dark"] {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

.output-panel[data-theme="vscode-dark"] .output-gutter {
  background-color: #1e1e1e;
  color: #858585;
}

.output-panel[data-theme="vscode-dark"] .output-code {
  background-color: #1e1e1e;
}

.output-panel[data-theme="vscode-dark"] pre > code {
  color: #d4d4d4;
}

.output-panel[data-theme="vscode-dark"] pre > code::selection,
.output-panel[data-theme="vscode-dark"] pre > code *::selection {
  background-color: #264f78;
}

.output-panel[data-theme="vscode-dark"] .line-highlight {
  background-color: #2a2d2e;
}

.output-panel[data-theme="vscode-dark"] .token.keyword {
  color: #569cd6;
}

.output-panel[data-theme="vscode-dark"] .token.string,
.output-panel[data-theme="vscode-dark"] .token.attr-value {
  color: #ce9178;
}

.output-panel[data-theme="vscode-dark"] .token.number,
.output-panel[data-theme="vscode-dark"] .token.boolean {
  color: #b5cea8;
}

.output-panel[data-theme="vscode-dark"] .token.comment {
  color: #6a9955;
}

.output-panel[data-theme="vscode-dark"] .token.function {
  color: #dcdcaa;
}

.output-panel[data-theme="vscode-dark"] .token.property,
.output-panel[data-theme="vscode-dark"] .token.attr-name {
  color: #9cdcfe;
}

.output-panel[data-theme="vscode-dark"] .token.tag {
  color: #569cd6;
}

.output-panel[data-theme="vscode-dark"] .token.operator {
  color: #d4d4d4;
}

.output-panel[data-theme="vscode-dark"] .token.punctuation {
  color: #d4d4d4;
}