/* ═══════════════════════════════════════════════════════════════════════
   TCE API Explorer — Theme Definitions (native CSS nesting)
   5 themes: Dark, Light, Dracula, Monokai, One Dark
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dark (default) ────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-base:         #060d1f;
  --bg-surface:      #0a1228;
  --bg-sidebar:      #080f20;
  --bg-card:         #0d1530;
  --bg-card-hover:   #111b3a;
  --bg-code:         #020810;
  --bg-input:        #0a1228;
  --bg-overlay:      rgba(0,0,0,0.6);
  --bg-tooltip:      #1e293b;

  --border:          #1e293b;
  --border-accent:   #1e3a8a;
  --border-subtle:   #151f38;

  --text-primary:    #f1f5f9;
  --text-secondary:  #94a3b8;
  --text-muted:      #8294aa;
  --text-inverse:    #0f172a;

  --accent:          #3b82f6;
  --accent-hover:    #2563eb;
  --accent-subtle:   #1e3a8a;
  --accent-text:     #93c5fd;

  --green:           #10b981;
  --green-subtle:    #0a2a1a;
  --green-text:      #86efac;
  --yellow:          #eab308;
  --yellow-subtle:   #1c1a07;
  --yellow-text:     #fde68a;
  --red:             #ef4444;
  --red-subtle:      #1c0b0b;
  --red-text:        #fca5a5;

  --text-on-accent:    #ffffff;
  --bg-muted-overlay:  rgba(127,127,127,0.15);
  --bg-muted-hover:    rgba(127,127,127,0.06);

  --badge-I-bg: #1e3a8a; --badge-I-fg: #60a5fa;
  --badge-C-bg: #2d1657; --badge-C-fg: #a78bfa;
  --badge-E-bg: #431407; --badge-E-fg: #fb923c;
  --badge-X-bg: #4c0519; --badge-X-fg: #f43f5e;
  --badge-S-bg: #14532d; --badge-S-fg: #34d399;

  --chip-active-bg:  #1d4ed8;
  --chip-active-fg:  #bfdbfe;
  --chip-hover-bg:   #1e293b;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 2px rgba(59,130,246,0.3);

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  --syn-keyword:  #c084fc;
  --syn-type:     #60a5fa;
  --syn-string:   #86efac;
  --syn-comment:  #475569;
  --syn-function: #fbbf24;
  --syn-variable: #f1f5f9;
  --syn-number:   #fb923c;

  --selection-bg:    rgba(59,130,246,0.35);
  --selection-fg:    #f1f5f9;
  --scrollbar-thumb: #1e293b;
  --scrollbar-track: #060d1f;
}

/* ── Light ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:         #f8fafc;
  --bg-surface:      #ffffff;
  --bg-sidebar:      #f1f5f9;
  --bg-card:         #ffffff;
  --bg-card-hover:   #f8fafc;
  --bg-code:         #f1f5f9;
  --bg-input:        #ffffff;
  --bg-overlay:      rgba(0,0,0,0.3);
  --bg-tooltip:      #334155;

  --border:          #e2e8f0;
  --border-accent:   #3b82f6;
  --border-subtle:   #f1f5f9;

  --text-primary:    #0f172a;
  --text-secondary:  #475569;
  --text-muted:      #64748b;
  --text-inverse:    #f8fafc;

  --accent:          #2563eb;
  --accent-hover:    #1d4ed8;
  --accent-subtle:   #dbeafe;
  --accent-text:     #1d4ed8;

  --green:           #059669;
  --green-subtle:    #dcfce7;
  --green-text:      #166534;
  --yellow:          #ca8a04;
  --yellow-subtle:   #fef9c3;
  --yellow-text:     #854d0e;
  --red:             #dc2626;
  --red-subtle:      #fee2e2;
  --red-text:        #991b1b;

  --text-on-accent:    #ffffff;
  --bg-muted-overlay:  rgba(127,127,127,0.12);
  --bg-muted-hover:    rgba(127,127,127,0.06);

  --badge-I-bg: #dbeafe; --badge-I-fg: #1d4ed8;
  --badge-C-bg: #ede9fe; --badge-C-fg: #6d28d9;
  --badge-E-bg: #ffedd5; --badge-E-fg: #c2410c;
  --badge-X-bg: #ffe4e6; --badge-X-fg: #be123c;
  --badge-S-bg: #dcfce7; --badge-S-fg: #166534;

  --chip-active-bg:  #2563eb;
  --chip-active-fg:  #ffffff;
  --chip-hover-bg:   #e2e8f0;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 0 2px rgba(37,99,235,0.2);

  --syn-keyword:  #7c3aed;
  --syn-type:     #2563eb;
  --syn-string:   #059669;
  --syn-comment:  #94a3b8;
  --syn-function: #b45309;
  --syn-variable: #0f172a;
  --syn-number:   #c2410c;

  --selection-bg:    rgba(37,99,235,0.2);
  --selection-fg:    #0f172a;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f1f5f9;
}

/* ── Dracula ───────────────────────────────────────────────────────── */
[data-theme="dracula"] {
  --bg-base:         #282a36;
  --bg-surface:      #2d2f3d;
  --bg-sidebar:      #21222c;
  --bg-card:         #313345;
  --bg-card-hover:   #3a3c4e;
  --bg-code:         #21222c;
  --bg-input:        #2d2f3d;
  --bg-overlay:      rgba(0,0,0,0.55);
  --bg-tooltip:      #44475a;

  --border:          #44475a;
  --border-accent:   #6272a4;
  --border-subtle:   #383a4a;

  --text-primary:    #f8f8f2;
  --text-secondary:  #cdd0db;
  --text-muted:      #6272a4;
  --text-inverse:    #282a36;

  --accent:          #bd93f9;
  --accent-hover:    #a475f0;
  --accent-subtle:   rgba(189,147,249,0.18);
  --accent-text:     #bd93f9;

  --green:           #50fa7b;
  --green-subtle:    rgba(80,250,123,0.12);
  --green-text:      #50fa7b;
  --yellow:          #f1fa8c;
  --yellow-subtle:   rgba(241,250,140,0.12);
  --yellow-text:     #f1fa8c;
  --red:             #ff5555;
  --red-subtle:      rgba(255,85,85,0.12);
  --red-text:        #ff5555;

  --text-on-accent:    #282a36;
  --bg-muted-overlay:  rgba(127,127,127,0.12);
  --bg-muted-hover:    rgba(127,127,127,0.06);

  --badge-I-bg: rgba(139,233,253,0.15); --badge-I-fg: #8be9fd;
  --badge-C-bg: rgba(189,147,249,0.15); --badge-C-fg: #bd93f9;
  --badge-E-bg: rgba(255,184,108,0.15); --badge-E-fg: #ffb86c;
  --badge-X-bg: rgba(255,85,85,0.15);   --badge-X-fg: #ff5555;
  --badge-S-bg: rgba(80,250,123,0.15);  --badge-S-fg: #50fa7b;

  --chip-active-bg:  #bd93f9;
  --chip-active-fg:  #282a36;
  --chip-hover-bg:   #44475a;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 2px rgba(189,147,249,0.3);

  --syn-keyword:  #ff79c6;
  --syn-type:     #8be9fd;
  --syn-string:   #f1fa8c;
  --syn-comment:  #6272a4;
  --syn-function: #50fa7b;
  --syn-variable: #f8f8f2;
  --syn-number:   #bd93f9;

  --selection-bg:    #44475a;
  --selection-fg:    #f8f8f2;
  --scrollbar-thumb: #6272a4;
  --scrollbar-track: #21222c;
}

/* ── Monokai ───────────────────────────────────────────────────────── */
[data-theme="monokai"] {
  --bg-base:         #272822;
  --bg-surface:      #2d2e27;
  --bg-sidebar:      #1e1f1c;
  --bg-card:         #32332c;
  --bg-card-hover:   #3a3b33;
  --bg-code:         #1e1f1c;
  --bg-input:        #2d2e27;
  --bg-overlay:      rgba(0,0,0,0.55);
  --bg-tooltip:      #49483e;

  --border:          #49483e;
  --border-accent:   #75715e;
  --border-subtle:   #3c3d37;

  --text-primary:    #f8f8f2;
  --text-secondary:  #cfcfc2;
  --text-muted:      #75715e;
  --text-inverse:    #272822;

  --accent:          #66d9ef;
  --accent-hover:    #4dc4d9;
  --accent-subtle:   rgba(102,217,239,0.15);
  --accent-text:     #66d9ef;

  --green:           #a6e22e;
  --green-subtle:    rgba(166,226,46,0.12);
  --green-text:      #a6e22e;
  --yellow:          #e6db74;
  --yellow-subtle:   rgba(230,219,116,0.12);
  --yellow-text:     #e6db74;
  --red:             #f92672;
  --red-subtle:      rgba(249,38,114,0.12);
  --red-text:        #f92672;

  --text-on-accent:    #272822;
  --bg-muted-overlay:  rgba(127,127,127,0.12);
  --bg-muted-hover:    rgba(127,127,127,0.06);

  --badge-I-bg: rgba(102,217,239,0.15); --badge-I-fg: #66d9ef;
  --badge-C-bg: rgba(174,129,255,0.15); --badge-C-fg: #ae81ff;
  --badge-E-bg: rgba(253,151,31,0.15);  --badge-E-fg: #fd971f;
  --badge-X-bg: rgba(249,38,114,0.15);  --badge-X-fg: #f92672;
  --badge-S-bg: rgba(166,226,46,0.15);  --badge-S-fg: #a6e22e;

  --chip-active-bg:  #66d9ef;
  --chip-active-fg:  #272822;
  --chip-hover-bg:   #49483e;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 2px rgba(102,217,239,0.3);

  --syn-keyword:  #f92672;
  --syn-type:     #66d9ef;
  --syn-string:   #e6db74;
  --syn-comment:  #75715e;
  --syn-function: #a6e22e;
  --syn-variable: #f8f8f2;
  --syn-number:   #ae81ff;

  --selection-bg:    #49483e;
  --selection-fg:    #f8f8f2;
  --scrollbar-thumb: #75715e;
  --scrollbar-track: #1e1f1c;
}

/* ── One Dark Pro (base — sidebar #21252b, editor #282c34) ────────── */
[data-theme="one-dark"] {
  --bg-base:         #282c34;
  --bg-surface:      #282c34;
  --bg-sidebar:      #21252b;
  --bg-card:         #21252b;
  --bg-card-hover:   #2c313a;
  --bg-code:         #21252b;
  --bg-input:        #1d1f23;
  --bg-overlay:      rgba(0,0,0,0.55);
  --bg-tooltip:      #21252b;

  --border:          #181a1f;
  --border-accent:   #3e4452;
  --border-subtle:   #181a1f;

  --text-primary:    #abb2bf;
  --text-secondary:  #9da5b4;
  --text-muted:      #636b78;
  --text-inverse:    #282c34;

  --accent:          #61afef;
  --accent-hover:    #4aa5f0;
  --accent-subtle:   rgba(97,175,239,0.15);
  --accent-text:     #61afef;

  --green:           #98c379;
  --green-subtle:    rgba(152,195,121,0.12);
  --green-text:      #8cc265;
  --yellow:          #e5c07b;
  --yellow-subtle:   rgba(229,192,123,0.12);
  --yellow-text:     #d18f52;
  --red:             #e06c75;
  --red-subtle:      rgba(224,108,117,0.12);
  --red-text:        #e05561;

  --text-on-accent:    #282c34;
  --bg-muted-overlay:  rgba(127,127,127,0.10);
  --bg-muted-hover:    rgba(127,127,127,0.05);

  --badge-I-bg: rgba(97,175,239,0.15);  --badge-I-fg: #61afef;
  --badge-C-bg: rgba(198,120,221,0.15); --badge-C-fg: #c678dd;
  --badge-E-bg: rgba(209,154,102,0.15); --badge-E-fg: #d19a66;
  --badge-X-bg: rgba(224,108,117,0.15); --badge-X-fg: #e06c75;
  --badge-S-bg: rgba(152,195,121,0.15); --badge-S-fg: #98c379;

  --chip-active-bg:  #61afef;
  --chip-active-fg:  #282c34;
  --chip-hover-bg:   #323842;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 2px rgba(97,175,239,0.3);

  --syn-keyword:  #c678dd;
  --syn-type:     #61afef;
  --syn-string:   #98c379;
  --syn-comment:  #5c6370;
  --syn-function: #e5c07b;
  --syn-variable: #abb2bf;
  --syn-number:   #d19a66;

  --selection-bg:    #67769660;
  --selection-fg:    #abb2bf;
  --scrollbar-thumb: #4e566660;
  --scrollbar-track: #282c34;
}

/* ── One Dark Pro Flat (uniform #282c34 everywhere) ──────────────── */
[data-theme="one-dark-flat"] {
  --bg-base:         #282c34;
  --bg-surface:      #282c34;
  --bg-sidebar:      #282c34;
  --bg-card:         #21252b;
  --bg-card-hover:   #2c313a;
  --bg-code:         #21252b;
  --bg-input:        #21252b;
  --bg-overlay:      rgba(0,0,0,0.55);
  --bg-tooltip:      #21252b;

  --border:          #181a1f;
  --border-accent:   #3e4452;
  --border-subtle:   #23252c;

  --text-primary:    #abb2bf;
  --text-secondary:  #9da5b4;
  --text-muted:      #636b78;
  --text-inverse:    #282c34;

  --accent:          #61afef;
  --accent-hover:    #4aa5f0;
  --accent-subtle:   rgba(97,175,239,0.15);
  --accent-text:     #61afef;

  --green:           #98c379;
  --green-subtle:    rgba(152,195,121,0.12);
  --green-text:      #8cc265;
  --yellow:          #e5c07b;
  --yellow-subtle:   rgba(229,192,123,0.12);
  --yellow-text:     #d18f52;
  --red:             #e06c75;
  --red-subtle:      rgba(224,108,117,0.12);
  --red-text:        #e05561;

  --text-on-accent:    #282c34;
  --bg-muted-overlay:  rgba(127,127,127,0.10);
  --bg-muted-hover:    rgba(127,127,127,0.05);

  --badge-I-bg: rgba(97,175,239,0.15);  --badge-I-fg: #61afef;
  --badge-C-bg: rgba(198,120,221,0.15); --badge-C-fg: #c678dd;
  --badge-E-bg: rgba(209,154,102,0.15); --badge-E-fg: #d19a66;
  --badge-X-bg: rgba(224,108,117,0.15); --badge-X-fg: #e06c75;
  --badge-S-bg: rgba(152,195,121,0.15); --badge-S-fg: #98c379;

  --chip-active-bg:  #61afef;
  --chip-active-fg:  #282c34;
  --chip-hover-bg:   #323842;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 2px rgba(97,175,239,0.3);

  --syn-keyword:  #c678dd;
  --syn-type:     #61afef;
  --syn-string:   #98c379;
  --syn-comment:  #5c6370;
  --syn-function: #e5c07b;
  --syn-variable: #abb2bf;
  --syn-number:   #d19a66;

  --selection-bg:    #67769660;
  --selection-fg:    #abb2bf;
  --scrollbar-thumb: #4e566660;
  --scrollbar-track: #282c34;
}

/* ── One Dark Pro Night Flat (darkest — #16191d base) ────────────── */
[data-theme="one-dark-night"] {
  --bg-base:         #16191d;
  --bg-surface:      #16191d;
  --bg-sidebar:      #16191d;
  --bg-card:         #1e2227;
  --bg-card-hover:   #2c313a;
  --bg-code:         #1e2227;
  --bg-input:        #1d1f23;
  --bg-overlay:      rgba(0,0,0,0.6);
  --bg-tooltip:      #1e2227;

  --border:          #181a1f;
  --border-accent:   #3e4452;
  --border-subtle:   #37393d;

  --text-primary:    #abb2bf;
  --text-secondary:  #9da5b4;
  --text-muted:      #636b78;
  --text-inverse:    #16191d;

  --accent:          #61afef;
  --accent-hover:    #4aa5f0;
  --accent-subtle:   rgba(97,175,239,0.15);
  --accent-text:     #61afef;

  --green:           #98c379;
  --green-subtle:    rgba(152,195,121,0.12);
  --green-text:      #8cc265;
  --yellow:          #e5c07b;
  --yellow-subtle:   rgba(229,192,123,0.12);
  --yellow-text:     #d18f52;
  --red:             #e06c75;
  --red-subtle:      rgba(224,108,117,0.12);
  --red-text:        #e05561;

  --text-on-accent:    #16191d;
  --bg-muted-overlay:  rgba(127,127,127,0.10);
  --bg-muted-hover:    rgba(127,127,127,0.05);

  --badge-I-bg: rgba(97,175,239,0.15);  --badge-I-fg: #61afef;
  --badge-C-bg: rgba(198,120,221,0.15); --badge-C-fg: #c678dd;
  --badge-E-bg: rgba(209,154,102,0.15); --badge-E-fg: #d19a66;
  --badge-X-bg: rgba(224,108,117,0.15); --badge-X-fg: #e06c75;
  --badge-S-bg: rgba(152,195,121,0.15); --badge-S-fg: #98c379;

  --chip-active-bg:  #4d78cc;
  --chip-active-fg:  #f8fafd;
  --chip-hover-bg:   #323842;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.50);
  --shadow-glow: 0 0 0 2px rgba(97,175,239,0.3);

  --syn-keyword:  #c678dd;
  --syn-type:     #61afef;
  --syn-string:   #98c379;
  --syn-comment:  #5c6370;
  --syn-function: #e5c07b;
  --syn-variable: #abb2bf;
  --syn-number:   #d19a66;

  --selection-bg:    #67769660;
  --selection-fg:    #abb2bf;
  --scrollbar-thumb: #4e566660;
  --scrollbar-track: #16191d;
}

/* ── Global selection & scrollbar (consume theme variables) ────────── */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Webkit scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-accent);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}