/* TokyoNight Night Theme for Forgejo */
/* Palette: https://github.com/folke/tokyonight.nvim */

:root {
  /* === TOKYONIGHT NIGHT BASE === */
  --tn-bg: #1a1b26;
  --tn-bg-dark: #16161e;
  --tn-bg-highlight: #292e42;
  --tn-bg-popup: #1e2030;
  --tn-bg-visual: #283457;
  --tn-black: #15161e;
  --tn-blue: #7aa2f7;
  --tn-blue0: #3d59a1;
  --tn-blue1: #2ac3de;
  --tn-blue5: #89ddff;
  --tn-blue6: #b4f9f8;
  --tn-blue7: #394b70;
  --tn-border: #15161e;
  --tn-comment: #565f89;
  --tn-cyan: #7dcfff;
  --tn-dark3: #545c7e;
  --tn-dark5: #737aa2;
  --tn-fg: #c0caf5;
  --tn-fg-dark: #a9b1d6;
  --tn-fg-gutter: #3b4261;
  --tn-green: #9ece6a;
  --tn-green1: #73daca;
  --tn-magenta: #bb9af7;
  --tn-orange: #ff9e64;
  --tn-purple: #9d7cd8;
  --tn-red: #f7768e;
  --tn-red1: #db4b4b;
  --tn-teal: #1abc9c;
  --tn-yellow: #e0af68;

  /* === STEEL SCALE (mapped to TokyoNight) === */
  --steel-900: var(--tn-black);
  --steel-850: var(--tn-bg-dark);
  --steel-800: var(--tn-bg);
  --steel-750: #1e2030;
  --steel-700: #24283b;
  --steel-650: var(--tn-bg-highlight);
  --steel-600: var(--tn-fg-gutter);
  --steel-550: #414868;
  --steel-500: var(--tn-comment);
  --steel-450: var(--tn-dark5);
  --steel-400: var(--tn-fg-dark);
  --steel-350: var(--tn-fg-dark);
  --steel-300: var(--tn-fg);
  --steel-250: var(--tn-fg);
  --steel-200: var(--tn-fg);
  --steel-150: var(--tn-fg);
  --steel-100: var(--tn-fg);

  /* === PRIMARY (blue) === */
  --color-primary: var(--tn-blue);
  --color-primary-contrast: var(--tn-bg);
  --color-primary-dark-1: var(--tn-blue5);
  --color-primary-dark-2: var(--tn-blue6);
  --color-primary-dark-3: var(--tn-fg);
  --color-primary-dark-4: var(--tn-fg);
  --color-primary-dark-5: var(--tn-fg);
  --color-primary-dark-6: var(--tn-fg);
  --color-primary-dark-7: var(--tn-fg);
  --color-primary-light-1: var(--tn-blue0);
  --color-primary-light-2: var(--tn-bg-visual);
  --color-primary-light-3: var(--tn-bg-popup);
  --color-primary-light-4: var(--tn-bg);
  --color-primary-light-5: var(--tn-bg);
  --color-primary-light-6: var(--tn-bg);
  --color-primary-light-7: var(--tn-bg);
  --color-primary-alpha-10: #7aa2f719;
  --color-primary-alpha-20: #7aa2f733;
  --color-primary-alpha-30: #7aa2f74b;
  --color-primary-alpha-40: #7aa2f766;
  --color-primary-alpha-50: #7aa2f780;
  --color-primary-alpha-60: #7aa2f799;
  --color-primary-alpha-70: #7aa2f7b3;
  --color-primary-alpha-80: #7aa2f7cc;
  --color-primary-alpha-90: #7aa2f7e1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* === SECONDARY === */
  --color-secondary: var(--tn-bg-popup);
  --color-secondary-dark-1: var(--tn-fg-gutter);
  --color-secondary-dark-2: var(--tn-comment);
  --color-secondary-dark-3: var(--tn-dark5);
  --color-secondary-dark-4: var(--tn-fg-dark);
  --color-secondary-dark-5: var(--tn-fg);
  --color-secondary-dark-6: var(--tn-fg);
  --color-secondary-dark-7: var(--tn-fg);
  --color-secondary-dark-8: var(--tn-fg);
  --color-secondary-dark-9: var(--tn-fg);
  --color-secondary-dark-10: var(--tn-fg);
  --color-secondary-dark-11: var(--tn-fg);
  --color-secondary-dark-12: var(--tn-fg);
  --color-secondary-dark-13: var(--tn-fg);
  --color-secondary-light-1: var(--tn-bg-highlight);
  --color-secondary-light-2: var(--tn-bg-popup);
  --color-secondary-light-3: #1e2030;
  --color-secondary-light-4: var(--tn-bg);
  --color-secondary-alpha-10: #24283b19;
  --color-secondary-alpha-20: #24283b33;
  --color-secondary-alpha-30: #24283b4b;
  --color-secondary-alpha-40: #24283b66;
  --color-secondary-alpha-50: #24283b80;
  --color-secondary-alpha-60: #24283b99;
  --color-secondary-alpha-70: #24283bb3;
  --color-secondary-alpha-80: #24283bcc;
  --color-secondary-alpha-90: #24283be1;
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);

  /* === CONSOLE === */
  --color-console-fg: var(--tn-fg);
  --color-console-fg-subtle: var(--tn-comment);
  --color-console-bg: var(--tn-bg-dark);
  --color-console-border: var(--tn-bg-highlight);
  --color-console-hover-bg: #ffffff16;
  --color-console-active-bg: var(--tn-fg-gutter);
  --color-console-menu-bg: var(--tn-bg-highlight);
  --color-console-menu-border: var(--tn-comment);

  /* === SEMANTIC COLORS === */
  --color-red: var(--tn-red);
  --color-orange: var(--tn-orange);
  --color-yellow: var(--tn-yellow);
  --color-olive: var(--tn-green);
  --color-green: var(--tn-teal);
  --color-teal: var(--tn-teal);
  --color-blue: var(--tn-blue);
  --color-violet: var(--tn-magenta);
  --color-purple: var(--tn-purple);
  --color-pink: var(--tn-red);
  --color-brown: var(--tn-fg-dark);
  --color-grey: var(--tn-comment);
  --color-black: var(--tn-black);

  /* light variants */
  --color-red-light: #ff9e64;
  --color-orange-light: var(--tn-orange);
  --color-yellow-light: var(--tn-yellow);
  --color-olive-light: #c3e88d;
  --color-green-light: var(--tn-green);
  --color-teal-light: var(--tn-green1);
  --color-blue-light: var(--tn-blue5);
  --color-violet-light: var(--tn-magenta);
  --color-purple-light: #c099ff;
  --color-pink-light: #fca7ea;
  --color-brown-light: var(--tn-fg-dark);
  --color-grey-light: var(--tn-dark5);
  --color-black-light: var(--tn-bg);

  /* dark 1 variants */
  --color-red-dark-1: var(--tn-red1);
  --color-orange-dark-1: #db4b4b;
  --color-yellow-dark-1: #b67c04;
  --color-olive-dark-1: #839311;
  --color-green-dark-1: #137337;
  --color-teal-dark-1: #0c857a;
  --color-blue-dark-1: var(--tn-blue0);
  --color-violet-dark-1: #6a1feb;
  --color-purple-dark-1: #7c3aed;
  --color-pink-dark-1: #c7216b;
  --color-brown-dark-1: #94674a;
  --color-black-dark-1: #0f1623;

  /* dark 2 variants */
  --color-red-dark-2: #941616;
  --color-orange-dark-2: #bb460a;
  --color-yellow-dark-2: var(--tn-yellow);
  --color-olive-dark-2: var(--tn-green);
  --color-green-dark-2: var(--tn-teal);
  --color-teal-dark-2: #0a766d;
  --color-blue-dark-2: var(--tn-blue);
  --color-violet-dark-2: #5c14d8;
  --color-purple-dark-2: var(--tn-purple);
  --color-pink-dark-2: #b11d5f;
  --color-brown-dark-2: var(--tn-fg-dark);
  --color-black-dark-2: var(--tn-black);

  /* === ANSI === */
  --color-ansi-black: var(--tn-black);
  --color-ansi-red: var(--tn-red);
  --color-ansi-green: var(--tn-green);
  --color-ansi-yellow: var(--tn-yellow);
  --color-ansi-blue: var(--tn-blue);
  --color-ansi-magenta: var(--tn-magenta);
  --color-ansi-cyan: var(--tn-cyan);
  --color-ansi-white: var(--tn-comment);
  --color-ansi-bright-black: var(--tn-fg-gutter);
  --color-ansi-bright-red: var(--tn-orange);
  --color-ansi-bright-green: #c3e88d;
  --color-ansi-bright-yellow: #ffc777;
  --color-ansi-bright-blue: var(--tn-blue5);
  --color-ansi-bright-magenta: #c099ff;
  --color-ansi-bright-cyan: var(--tn-blue6);
  --color-ansi-bright-white: var(--tn-fg);

  /* === OTHER === */
  --color-gold: var(--tn-yellow);
  --color-white: var(--tn-fg);
  --color-pure-black: #000000;

  /* === DIFF === */
  --color-diff-removed-word-bg: #4b2a3d;
  --color-diff-added-word-bg: #1d3b35;
  --color-diff-removed-row-bg: #3d2a35;
  --color-diff-moved-row-bg: #3d3428;
  --color-diff-added-row-bg: #1a2e28;
  --color-diff-removed-row-border: #4b2a3d;
  --color-diff-moved-row-border: var(--tn-yellow);
  --color-diff-added-row-border: #1d3b35;
  --color-diff-inactive: var(--tn-fg-gutter);

  /* === ALERTS === */
  --color-error-border: var(--tn-red);
  --color-error-bg: #3d2a35;
  --color-error-bg-active: #4b2a3d;
  --color-error-bg-hover: #4b2a3d;
  --color-error-text: var(--tn-red);
  --color-success-border: var(--tn-green1);
  --color-success-bg: #1d3b35;
  --color-success-text: var(--tn-green);
  --color-warning-border: var(--tn-yellow);
  --color-warning-bg: #3d3428;
  --color-warning-text: var(--tn-yellow);
  --color-info-border: var(--tn-blue);
  --color-info-bg: var(--tn-bg-visual);
  --color-info-text: var(--tn-fg);

  /* === BADGES === */
  --color-red-badge: var(--tn-red);
  --color-red-badge-bg: #f7768e22;
  --color-red-badge-hover-bg: #f7768e44;
  --color-green-badge: var(--tn-green);
  --color-green-badge-bg: #9ece6a22;
  --color-green-badge-hover-bg: #9ece6a44;
  --color-yellow-badge: var(--tn-yellow);
  --color-yellow-badge-bg: #e0af6822;
  --color-yellow-badge-hover-bg: #e0af6844;
  --color-orange-badge: var(--tn-orange);
  --color-orange-badge-bg: #ff9e6422;
  --color-orange-badge-hover-bg: #ff9e6444;

  /* === THIN / OKLCH === */
  --thin-lightness: 0.72;
  --regular-chroma: 0.18;

  /* === TARGET COLORS === */
  --color-body: var(--tn-bg);
  --color-box-header: var(--tn-bg-popup);
  --color-box-body: #1e2030;
  --color-box-body-highlight: var(--tn-bg-highlight);
  --color-text-dark: var(--tn-fg);
  --color-text: var(--tn-fg);
  --color-text-light: var(--tn-fg-dark);
  --color-text-light-1: var(--tn-fg-dark);
  --color-text-light-2: var(--tn-dark5);
  --color-text-light-3: var(--tn-comment);
  --color-footer: var(--tn-bg-dark);
  --color-timeline: var(--tn-fg-gutter);
  --color-input-text: var(--tn-fg);
  --color-input-background: var(--tn-fg-gutter);
  --color-input-toggle-background: var(--tn-fg-gutter);
  --color-input-border: #414868;
  --color-input-border-hover: var(--tn-dark5);
  --color-header-wrapper: var(--tn-bg-dark);
  --color-header-wrapper-transparent: #16161e00;
  --color-light: #00000028;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-light-border: #ffffff28;
  --color-hover: var(--tn-bg-highlight);
  --color-active: var(--tn-fg-gutter);
  --color-menu: var(--tn-bg-popup);
  --color-card: var(--tn-bg-popup);
  --fancy-card-bg: var(--tn-bg-highlight);
  --fancy-card-border: var(--tn-fg-gutter);
  --color-markup-table-row: #ffffff06;
  --color-markup-code-block: var(--tn-bg-dark);
  --color-markup-code-inline: var(--tn-black);
  --color-button: var(--tn-fg-gutter);
  --color-code-bg: #1e2030;
  --color-shadow: #00000080;
  --color-secondary-bg: var(--tn-bg-popup);
  --color-text-focus: #fff;
  --color-expand-button: var(--tn-fg-gutter);
  --color-placeholder-text: var(--tn-comment);
  --color-editor-line-highlight: var(--tn-bg-popup);
  --color-project-board-bg: var(--color-secondary-light-3);
  --color-project-board-dark-label: var(--tn-comment);
  --color-caret: var(--tn-fg);
  --color-reaction-bg: #ffffff12;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-tooltip-text: var(--tn-fg);
  --color-tooltip-bg: #000000f0;
  --color-nav-bg: var(--tn-bg-dark);
  --color-nav-hover-bg: var(--tn-bg-highlight);
  --color-secondary-nav-bg: var(--tn-bg);
  --color-label-text: var(--tn-fg);
  --color-label-bg: var(--tn-fg-gutter);
  --color-label-hover-bg: #414868;
  --color-label-active-bg: var(--tn-dark5);
  --color-label-bg-alt: #414868;
  --color-accent: var(--tn-blue);
  --color-small-accent: var(--tn-blue5);
  --color-highlight-fg: var(--tn-blue);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-overlay-backdrop: #080808c0;
  --color-selection-bg: var(--tn-bg-visual);
  --color-selection-fg: var(--tn-fg);
  --checkerboard-color-1: #3b4261;
  --checkerboard-color-2: #292e42;
  --color-indicator-offline: var(--tn-dark5);
  --color-indicator-offline-20: #737aa21a;
  --color-indicator-idle: var(--tn-green);
  --color-indicator-idle-20: #9ece6a1a;
  --color-indicator-active: var(--tn-blue);
  --color-indicator-active-20: #7aa2f733;

  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* === FOMANTIC UI OVERRIDES === */
.ui.menu {
  background: var(--color-nav-bg) !important;
}

.ui.menu .item {
  color: var(--color-text) !important;
}

.ui.menu .item:hover {
  background: var(--color-nav-hover-bg) !important;
  color: var(--color-text) !important;
}

.ui.menu .active.item {
  background: var(--color-active) !important;
  color: var(--color-text) !important;
}

.ui.dropdown .menu {
  background: var(--color-menu) !important;
  border-color: var(--color-input-border) !important;
}

.ui.dropdown .menu > .item {
  color: var(--color-text) !important;
}

.ui.dropdown .menu > .item:hover {
  background: var(--color-hover) !important;
  color: var(--color-text) !important;
}

.ui.segment {
  background: var(--color-box-body) !important;
  border-color: var(--color-input-border) !important;
}

.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.input > input {
  background: var(--color-input-background) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.input > input:focus {
  border-color: var(--color-primary) !important;
  color: var(--color-input-text) !important;
}

.ui.button {
  background: var(--color-button) !important;
  color: var(--color-text) !important;
}

.ui.primary.button {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}

.ui.primary.button:hover {
  background: var(--color-primary-hover) !important;
}

.ui.basic.button {
  background: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

.ui.basic.primary.button {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: transparent !important;
}

.ui.basic.primary.button:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-alpha-20) !important;
}

.ui.label {
  background: var(--color-label-bg) !important;
  color: var(--color-label-text) !important;
}

.ui.primary.label {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}

.ui.table {
  background: var(--color-box-body) !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

.ui.table th {
  background: var(--color-box-header) !important;
  color: var(--color-text) !important;
}

.ui.table tr:hover {
  background: var(--color-hover) !important;
}

.ui.message {
  background: var(--color-box-body) !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

.ui.divider {
  color: var(--color-text-light) !important;
}

.ui.tabular.menu {
  border-color: var(--color-input-border) !important;
}

.ui.tabular.menu .item {
  color: var(--color-text-light) !important;
}

.ui.tabular.menu .active.item {
  background: var(--color-box-body) !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
  border-bottom-color: var(--color-box-body) !important;
}

.ui.pagination.menu {
  background: var(--color-box-body) !important;
}

.ui.pagination.menu .item {
  color: var(--color-text) !important;
}

.ui.pagination.menu .item:hover {
  background: var(--color-hover) !important;
}

.ui.pagination.menu .active.item {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}

.ui.card {
  background: var(--color-card) !important;
  border-color: var(--color-input-border) !important;
}

.ui.card > .content {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
}

.ui.card > .extra.content {
  background: var(--color-box-header) !important;
  border-color: var(--color-input-border) !important;
}

.ui.modal {
  background: var(--color-box-body) !important;
}

.ui.modal > .header {
  background: var(--color-box-header) !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

.ui.modal > .content {
  background: var(--color-box-body) !important;
  color: var(--color-text) !important;
}

.ui.modal > .actions {
  background: var(--color-box-header) !important;
  border-color: var(--color-input-border) !important;
}

.ui.popup {
  background: var(--color-box-body) !important;
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

/* === FORGEJO SPECIFIC === */
#navbar {
  background: var(--color-nav-bg) !important;
  border-bottom-color: var(--color-input-border) !important;
}

.page-content {
  background: var(--color-body) !important;
}

.repository.file.list #repo-files-table tr:hover {
  background: var(--color-hover) !important;
}

.repository.file.list #repo-files-table td {
  border-color: var(--color-input-border) !important;
}

.repository.file.list #repo-files-table th {
  background: var(--color-box-header) !important;
  color: var(--color-text) !important;
}

.markdown-body {
  color: var(--color-text) !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: var(--color-text) !important;
  border-color: var(--color-input-border) !important;
}

.markdown-body code {
  background: var(--color-markup-code-inline) !important;
  color: var(--color-text) !important;
}

.markdown-body pre {
  background: var(--color-markup-code-block) !important;
  border-color: var(--color-input-border) !important;
}

.markdown-body blockquote {
  border-left-color: var(--color-primary) !important;
  color: var(--color-text-light) !important;
}

.markdown-body table th,
.markdown-body table td {
  border-color: var(--color-input-border) !important;
}

.markdown-body table tr:nth-child(2n) {
  background: var(--color-markup-table-row) !important;
}

.markdown-body hr {
  background-color: var(--color-input-border) !important;
}

.markdown-body a {
  color: var(--color-primary) !important;
}

.markdown-body a:hover {
  color: var(--color-primary-dark-1) !important;
}

/* === CHROMA SYNTAX HIGHLIGHTING === */
/* Overrides only TEXT COLORS. Never backgrounds — the default forgejo-dark
   theme handles those correctly, including diff row highlighting. */

/* Comments */
.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm { color: #565f89 !important; font-style: italic !important; }
.chroma .cp { color: #7dcfff !important; }
.chroma .cpf { color: #7dcfff !important; }
.chroma .cs { color: #bb9af7 !important; }

/* Keywords */
.chroma .k,
.chroma .kd,
.chroma .kr { color: #bb9af7 !important; }
.chroma .kn { color: #bb9af7 !important; }
.chroma .kp { color: #bb9af7 !important; }
.chroma .kt { color: #ff9e64 !important; }

/* Literals - Strings */
.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sb,
.chroma .sh { color: #9ece6a !important; }
.chroma .sc { color: #e0af68 !important; }
.chroma .sd { color: #565f89 !important; font-style: italic !important; }
.chroma .se { color: #ff9e64 !important; }
.chroma .si { color: #ff9e64 !important; }
.chroma .sr { color: #89ddff !important; }
.chroma .ss { color: #e0af68 !important; }
.chroma .sx { color: #e0af68 !important; }
.chroma .sa { color: #bb9af7 !important; }
.chroma .dl { color: #89ddff !important; }

/* Literals - Numbers */
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo,
.chroma .il { color: #e0af68 !important; }

/* Names */
.chroma .n { color: #c0caf5 !important; }
.chroma .na { color: #7aa2f7 !important; }
.chroma .nb { color: #7dcfff !important; }
.chroma .nc { color: #ff9e64 !important; }
.chroma .nd { color: #bb9af7 !important; }
.chroma .ne { color: #bb9af7 !important; }
.chroma .nf { color: #7aa2f7 !important; }
.chroma .ni { color: #bb9af7 !important; }
.chroma .nl { color: #bb9af7 !important; }
.chroma .nn { color: #c0caf5 !important; }
.chroma .no { color: #e0af68 !important; }
.chroma .nt { color: #f7768e !important; }
.chroma .nv { color: #c0caf5 !important; }
.chroma .nx { color: #c0caf5 !important; }
.chroma .py { color: #c0caf5 !important; }

/* Operators & Punctuation */
.chroma .o { color: #89ddff !important; }
.chroma .ow { color: #9ece6a !important; }
.chroma .p { color: #a9b1d6 !important; }

/* Builtins & Constants */
.chroma .bp { color: #7dcfff !important; }
.chroma .kc { color: #e0af68 !important; }

/* Generic */
.chroma .g { color: #c0caf5 !important; }
.chroma .gd { color: #f7768e !important; background-color: #3d2a35 !important; }
.chroma .ge { color: #bb9af7 !important; font-style: italic !important; }
.chroma .gh { color: #7aa2f7 !important; }
.chroma .gi { color: #9ece6a !important; background-color: #1d3b35 !important; }
.chroma .gl { color: #c0caf5 !important; text-decoration: underline !important; }
.chroma .go { color: #565f89 !important; }
.chroma .gp { color: #a9b1d6 !important; }
.chroma .gr { color: #f7768e !important; }
.chroma .gs { color: #c0caf5 !important; font-weight: bold !important; }
.chroma .gt { color: #f7768e !important; }
.chroma .gu { color: #9ece6a !important; }
.chroma .w { color: #3b4261 !important; }
.chroma .err { color: #f7768e !important; }

/* === CODEMIRROR 5 (EasyMDE / Markdown Editor) === */
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-paper {
  background: var(--tn-bg-dark) !important;
  color: var(--tn-fg) !important;
}

.CodeMirror.cm-s-default .CodeMirror-gutters,
.CodeMirror.cm-s-paper .CodeMirror-gutters {
  background: var(--tn-bg-dark) !important;
  border-color: var(--tn-fg-gutter) !important;
}

.CodeMirror.cm-s-default .CodeMirror-linenumber,
.CodeMirror.cm-s-paper .CodeMirror-linenumber {
  color: var(--tn-fg-gutter) !important;
}

.CodeMirror.cm-s-default .cm-property,
.CodeMirror.cm-s-paper .cm-property {
  color: #73daca !important;
}

.CodeMirror.cm-s-default .cm-header,
.CodeMirror.cm-s-paper .cm-header {
  color: #7aa2f7 !important;
}

.CodeMirror.cm-s-default .cm-quote,
.CodeMirror.cm-s-paper .cm-quote {
  color: #9ece6a !important;
}

.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword {
  color: #bb9af7 !important;
}

.CodeMirror.cm-s-default .cm-atom,
.CodeMirror.cm-s-paper .cm-atom {
  color: #7dcfff !important;
}

.CodeMirror.cm-s-default .cm-number,
.CodeMirror.cm-s-paper .cm-number {
  color: #e0af68 !important;
}

.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def {
  color: #7aa2f7 !important;
}

.CodeMirror.cm-s-default .cm-variable,
.CodeMirror.cm-s-paper .cm-variable {
  color: #c0caf5 !important;
}

.CodeMirror.cm-s-default .cm-variable-2,
.CodeMirror.cm-s-paper .cm-variable-2 {
  color: #7aa2f7 !important;
}

.CodeMirror.cm-s-default .cm-variable-3,
.CodeMirror.cm-s-paper .cm-variable-3 {
  color: #73daca !important;
}

.CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment {
  color: #565f89 !important;
}

.CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string {
  color: #9ece6a !important;
}

.CodeMirror.cm-s-default .cm-string-2,
.CodeMirror.cm-s-paper .cm-string-2 {
  color: #e0af68 !important;
}

.CodeMirror.cm-s-default .cm-meta,
.CodeMirror.cm-s-paper .cm-meta,
.CodeMirror.cm-s-default .cm-qualifier,
.CodeMirror.cm-s-paper .cm-qualifier {
  color: #ff9e64 !important;
}

.CodeMirror.cm-s-default .cm-builtin,
.CodeMirror.cm-s-paper .cm-builtin {
  color: #7dcfff !important;
}

.CodeMirror.cm-s-default .cm-bracket,
.CodeMirror.cm-s-paper .cm-bracket {
  color: #a9b1d6 !important;
}

.CodeMirror.cm-s-default .cm-tag,
.CodeMirror.cm-s-paper .cm-tag {
  color: #f7768e !important;
}

.CodeMirror.cm-s-default .cm-attribute,
.CodeMirror.cm-s-paper .cm-attribute {
  color: #7aa2f7 !important;
}

.CodeMirror.cm-s-default .cm-hr,
.CodeMirror.cm-s-paper .cm-hr {
  color: #565f89 !important;
}

.CodeMirror.cm-s-default .cm-url,
.CodeMirror.cm-s-paper .cm-url {
  color: #7dcfff !important;
}

.CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-paper .cm-link {
  color: #7aa2f7 !important;
}

.CodeMirror.cm-s-default .cm-error,
.CodeMirror.cm-s-paper .cm-error {
  color: #f7768e !important;
}

/* === CODEMIRROR 6 (File Editor) === */
/* CodeMirror 6 generates cmt-* classes via HighlightStyle.define() */
/* These !important rules override the hardcoded VS Code-style colors */

.cm-content .cmt-keyword,
.cm-content .cmt-controlKeyword,
.cm-content .cmt-moduleKeyword,
.cm-content .cmt-operatorKeyword,
.cm-content .cmt-modifier,
.cm-content .cmt-atom,
.cm-content .cmt-bool,
.cm-content .cmt-special { color: #bb9af7 !important; }

.cm-content .cmt-name,
.cm-content .cmt-deleted,
.cm-content .cmt-character,
.cm-content .cmt-macroName,
.cm-content .cmt-propertyName,
.cm-content .cmt-variableName,
.cm-content .cmt-labelName,
.cm-content .cmt-definition { color: #c0caf5 !important; }

.cm-content .cmt-typeName,
.cm-content .cmt-className,
.cm-content .cmt-tagName,
.cm-content .cmt-changed,
.cm-content .cmt-annotation,
.cm-content .cmt-self,
.cm-content .cmt-namespace { color: #ff9e64 !important; }

.cm-content .cmt-function { color: #7aa2f7 !important; }

.cm-content .cmt-number { color: #e0af68 !important; }

.cm-content .cmt-operator,
.cm-content .cmt-punctuation,
.cm-content .cmt-separator,
.cm-content .cmt-url,
.cm-content .cmt-escape { color: #89ddff !important; }

.cm-content .cmt-regexp { color: #89ddff !important; }

.cm-content .cmt-string,
.cm-content .cmt-processingInstruction,
.cm-content .cmt-inserted,
.cm-content .cmt-specialString { color: #9ece6a !important; }

.cm-content .cmt-meta,
.cm-content .cmt-comment { color: #565f89 !important; }

.cm-content .cmt-invalid { color: #f7768e !important; }

.cm-content .cmt-link { color: #7aa2f7 !important; text-decoration: underline !important; }

.cm-content .cmt-strong { font-weight: bold !important; }
.cm-content .cmt-emphasis { font-style: italic !important; }
.cm-content .cmt-strikethrough { text-decoration: line-through !important; }

/* CodeMirror 6 editor chrome */
.cm-editor {
  background: var(--tn-bg-dark) !important;
}

.cm-editor .cm-gutters {
  background: var(--tn-bg-dark) !important;
  border-color: var(--tn-fg-gutter) !important;
  color: var(--tn-fg-gutter) !important;
}

.cm-editor .cm-activeLine,
.cm-editor .cm-activeLineGutter {
  background-color: #292e42 !important;
}

.cm-editor .cm-selectionBackground {
  background-color: var(--tn-bg-visual) !important;
}

.cm-editor .cm-cursor {
  border-left-color: var(--tn-fg) !important;
}

.cm-editor .cm-tooltip {
  background: var(--tn-bg-popup) !important;
  border-color: var(--tn-fg-gutter) !important;
  color: var(--tn-fg) !important;
}

.cm-editor .cm-tooltip-autocomplete > ul > li {
  color: var(--tn-fg) !important;
}

.cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--tn-bg-highlight) !important;
  color: var(--tn-fg) !important;
}

.cm-editor .cm-searchMatch {
  background-color: var(--tn-bg-visual) !important;
  outline: 1px solid var(--tn-blue) !important;
}

.cm-editor .cm-panels {
  background: var(--tn-bg) !important;
  border-color: var(--tn-fg-gutter) !important;
  color: var(--tn-fg) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-body);
}

::-webkit-scrollbar-thumb {
  background: var(--tn-fg-gutter);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tn-dark5);
}