/* ============================================================
   zhrexx theme for Forgejo
   Palette derived from: z+h+r+e+x+x = 681 % 360 = 321deg
   Primary:  #b06ef3  (violet-magenta)
   Cyan:     #3de8c8  (teal accent)
   Bg root:  #09080d  (near-black, violet undertone)
   ============================================================ */

/* --- Chroma / syntax highlighting -------------------------- */

.chroma .bp  { color: #fabd2f }
.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm  { color: #5a5270 }
.chroma .cp  { color: #3de8c8 }
.chroma .cpf { color: #7eb8f7 }
.chroma .cs  { color: #b06ef3 }
.chroma .dl  { color: #7eb8f7 }
.chroma .gd  { color: #fff; background-color: #4a1f4a }
.chroma .ge  { color: #3de8c8 }
.chroma .gh  { color: #b06ef3 }
.chroma .gi  { color: #fff; background-color: #1a3a35 }
.chroma .go  { color: #5a5270 }
.chroma .gp  { color: #e8e2f5 }
.chroma .gr  { color: #f43 }
.chroma .gs  { color: #e8e2f5 }
.chroma .gt  { color: #b06ef3 }
.chroma .gu  { color: #3de8c8 }
.chroma .il  { color: #7eb8f7 }
.chroma .k   { color: #b06ef3 }
.chroma .kc  { color: #7eb8f7 }
.chroma .kd  { color: #b06ef3 }
.chroma .kn  { color: #3de8c8 }
.chroma .kp  { color: #3de8c8 }
.chroma .kr  { color: #b06ef3 }
.chroma .kt  { color: #e08af5 }
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo  { color: #7eb8f7 }
.chroma .n   { color: #e8e2f5 }
.chroma .na,
.chroma .nb  { color: #3de8c8 }
.chroma .nc  { color: #b06ef3 }
.chroma .nd  { color: #3de8c8 }
.chroma .ne  { color: #b06ef3 }
.chroma .nf,
.chroma .ni  { color: #3de8c8 }
.chroma .nl  { color: #b06ef3 }
.chroma .nn  { color: #e8e2f5 }
.chroma .no  { color: #7eb8f7 }
.chroma .nt  { color: #b06ef3 }
.chroma .nv  { color: #e8e2f5 }
.chroma .nx  { color: #b6bac5 }
.chroma .o   { color: #b06ef3 }
.chroma .ow  { color: #3de8c8 }
.chroma .p   { color: #d2d4db }
.chroma .s,
.chroma .s1,
.chroma .s2  { color: #3de8c8 }
.chroma .sa  { color: #b06ef3 }
.chroma .sb  { color: #3de8c8 }
.chroma .sc  { color: #b06ef3 }
.chroma .sd  { color: #3de8c8 }
.chroma .se  { color: #e08af5 }
.chroma .sh  { color: #3de8c8 }
.chroma .si  { color: #b06ef3 }
.chroma .sr  { color: #b06ef3 }
.chroma .ss  { color: #e08af5 }
.chroma .sx  { color: #b06ef3 }
.chroma .vc,
.chroma .vg,
.chroma .vi  { color: #7eb8f7 }
.chroma .w   { color: #4a4068 }

/* --- CodeMirror editor ------------------------------------ */

.CodeMirror.cm-s-default .cm-property,
.CodeMirror.cm-s-paper .cm-property    { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-header,
.CodeMirror.cm-s-paper .cm-header      { color: #b06ef3 }
.CodeMirror.cm-s-default .cm-quote,
.CodeMirror.cm-s-paper .cm-quote       { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword     { color: #b06ef3 }
.CodeMirror.cm-s-default .cm-atom,
.CodeMirror.cm-s-paper .cm-atom        { color: #e08af5 }
.CodeMirror.cm-s-default .cm-number,
.CodeMirror.cm-s-paper .cm-number      { color: #7eb8f7 }
.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def         { color: #e8e2f5 }
.CodeMirror.cm-s-default .cm-variable-2,
.CodeMirror.cm-s-paper .cm-variable-2  { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-variable-3,
.CodeMirror.cm-s-paper .cm-variable-3  { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment     { color: #5a5270 }
.CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string      { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-string-2,
.CodeMirror.cm-s-paper .cm-string-2    { color: #e08af5 }
.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: #b06ef3 }
.CodeMirror.cm-s-default .cm-builtin,
.CodeMirror.cm-s-paper .cm-builtin     { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-bracket,
.CodeMirror.cm-s-paper .cm-bracket     { color: #7a6e99 }
.CodeMirror.cm-s-default .cm-tag,
.CodeMirror.cm-s-paper .cm-tag         { color: #b06ef3 }
.CodeMirror.cm-s-default .cm-attribute,
.CodeMirror.cm-s-paper .cm-attribute   { color: #3de8c8 }
.CodeMirror.cm-s-default .cm-hr,
.CodeMirror.cm-s-paper .cm-hr          { color: #4a4068 }
.CodeMirror.cm-s-default .cm-url,
.CodeMirror.cm-s-paper .cm-url         { color: #7eb8f7 }
.CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-paper .cm-link        { color: #b06ef3 }
.CodeMirror.cm-s-default .cm-error,
.CodeMirror.cm-s-paper .cm-error       { color: #e08af5 }

/* --- Dark-mode image visibility --------------------------- */

.markup [src$="#gh-light-mode-only"],
.markup [src$="#light-mode-only"],
.markup [href$="#gh-light-mode-only"],
.markup [href$="#light-mode-only"]      { display: none }
.markup [src$="#gh-dark-mode-only"],
.markup [src$="#dark-mode-only"],
.markup [href$="#gh-dark-mode-only"],
.markup [href$="#dark-mode-only"]       { display: unset }

/* --- CSS custom properties -------------------------------- */

:root {
  /* Background scale — violet-tinted near-black */
  --zx-900: #09080d;
  --zx-850: #0c0b12;
  --zx-800: #0e0c16;
  --zx-750: #11101b;
  --zx-700: #13101f;
  --zx-650: #181525;
  --zx-600: #1e1a2e;
  --zx-550: #252038;
  --zx-500: #2e2944;
  --zx-450: #3a3452;
  --zx-400: #4a4068;
  --zx-350: #5e5880;
  --zx-300: #7a6e99;
  --zx-250: #9a8eb8;
  --zx-200: #b8aed4;
  --zx-150: #d0c8e8;
  --zx-100: #e8e2f5;

  --is-dark-theme: true;

  /* Primary — violet-magenta #b06ef3 */
  --color-primary:           #b06ef3;
  --color-primary-contrast:  #09080d;
  --color-primary-dark-1:    #c990f7;
  --color-primary-dark-2:    #d9a8fa;
  --color-primary-dark-3:    #e4bcfb;
  --color-primary-dark-4:    #eecffd;
  --color-primary-dark-5:    #f5e3fe;
  --color-primary-dark-6:    #f5e3fe;
  --color-primary-dark-7:    #faf3ff;
  --color-primary-light-1:   #9a52e8;
  --color-primary-light-2:   #8438d8;
  --color-primary-light-3:   #6e28c0;
  --color-primary-light-4:   #5a1ea8;
  --color-primary-light-5:   #5a1ea8;
  --color-primary-light-6:   #461590;
  --color-primary-light-7:   #461590;
  --color-primary-alpha-10:  #b06ef319;
  --color-primary-alpha-20:  #b06ef333;
  --color-primary-alpha-30:  #b06ef34b;
  --color-primary-alpha-40:  #b06ef366;
  --color-primary-alpha-50:  #b06ef380;
  --color-primary-alpha-60:  #b06ef399;
  --color-primary-alpha-70:  #b06ef3b3;
  --color-primary-alpha-80:  #b06ef3cc;
  --color-primary-alpha-90:  #b06ef3e1;
  --color-primary-hover:     var(--color-primary-light-1);
  --color-primary-active:    var(--color-primary-light-2);

  /* Secondary — from zx scale */
  --color-secondary:          var(--zx-700);
  --color-secondary-dark-1:   var(--zx-550);
  --color-secondary-dark-2:   var(--zx-500);
  --color-secondary-dark-3:   var(--zx-450);
  --color-secondary-dark-4:   var(--zx-400);
  --color-secondary-dark-5:   var(--zx-350);
  --color-secondary-dark-6:   var(--zx-300);
  --color-secondary-dark-7:   var(--zx-250);
  --color-secondary-dark-8:   var(--zx-200);
  --color-secondary-dark-9:   var(--zx-150);
  --color-secondary-dark-10:  var(--zx-100);
  --color-secondary-dark-11:  var(--zx-100);
  --color-secondary-dark-12:  var(--zx-100);
  --color-secondary-dark-13:  var(--zx-100);
  --color-secondary-light-1:  var(--zx-650);
  --color-secondary-light-2:  var(--zx-700);
  --color-secondary-light-3:  var(--zx-750);
  --color-secondary-light-4:  var(--zx-800);
  --color-secondary-alpha-10: #13101f19;
  --color-secondary-alpha-20: #13101f33;
  --color-secondary-alpha-30: #13101f4b;
  --color-secondary-alpha-40: #13101f66;
  --color-secondary-alpha-50: #13101f80;
  --color-secondary-alpha-60: #13101f99;
  --color-secondary-alpha-70: #13101fb3;
  --color-secondary-alpha-80: #13101fcc;
  --color-secondary-alpha-90: #13101fe1;
  --color-secondary-hover:    var(--color-secondary-light-1);
  --color-secondary-active:   var(--color-secondary-light-2);

  /* Console */
  --color-console-fg:          #e8e2f5;
  --color-console-fg-subtle:   #7a6e99;
  --color-console-bg:          #0e0c16;
  --color-console-border:      #2e2944;
  --color-console-hover-bg:    #ffffff16;
  --color-console-active-bg:   #3a3452;
  --color-console-menu-bg:     #2e2944;
  --color-console-menu-border: #4a4068;

  /* Semantic colours */
  --color-red:          #b91c1c;
  --color-orange:       #b06ef3;
  --color-yellow:       #3de8c8;
  --color-olive:        #3dc8a8;
  --color-green:        #15803d;
  --color-teal:         #0d9488;
  --color-blue:         #7eb8f7;
  --color-violet:       #b06ef3;
  --color-purple:       #c990f7;
  --color-pink:         #e08af5;
  --color-brown:        #a47252;
  --color-grey:         var(--zx-500);
  --color-black:        #09080d;

  --color-red-light:    #dc2626;
  --color-orange-light: #b06ef3;
  --color-yellow-light: #3de8c8;
  --color-olive-light:  #3dc8a8;
  --color-green-light:  #16a34a;
  --color-teal-light:   #14b8a6;
  --color-blue-light:   #7eb8f7;
  --color-violet-light: #c990f7;
  --color-purple-light: #d9a8fa;
  --color-pink-light:   #e8c0fd;
  --color-brown-light:  #94674a;
  --color-grey-light:   var(--zx-300);
  --color-black-light:  #13101f;

  --color-red-dark-1:    #a71919;
  --color-orange-dark-1: #9a52e8;
  --color-yellow-dark-1: #2dcfb0;
  --color-olive-dark-1:  #2db090;
  --color-green-dark-1:  #137337;
  --color-teal-dark-1:   #0c857a;
  --color-blue-dark-1:   #5a9ee0;
  --color-violet-dark-1: #9a52e8;
  --color-purple-dark-1: #8438d8;
  --color-pink-dark-1:   #c970e8;
  --color-brown-dark-1:  #94674a;
  --color-black-dark-1:  #0c0b12;

  --color-red-dark-2:    #941616;
  --color-orange-dark-2: #8438d8;
  --color-yellow-dark-2: #1bb098;
  --color-olive-dark-2:  #1b9878;
  --color-green-dark-2:  #15803d;
  --color-teal-dark-2:   #0a766d;
  --color-blue-dark-2:   #3d84cc;
  --color-violet-dark-2: #6e28c0;
  --color-purple-dark-2: #6e28c0;
  --color-pink-dark-2:   #b058d0;
  --color-brown-dark-2:  #a47252;
  --color-black-dark-2:  #09080d;

  /* ANSI terminal */
  --color-ansi-black:          #13101f;
  --color-ansi-red:            #cc4848;
  --color-ansi-green:          #3de8c8;
  --color-ansi-yellow:         #b06ef3;
  --color-ansi-blue:           #7eb8f7;
  --color-ansi-magenta:        #c990f7;
  --color-ansi-cyan:           #2dcfb0;
  --color-ansi-white:          var(--color-console-fg-subtle);
  --color-ansi-bright-black:   #2e2944;
  --color-ansi-bright-red:     #d15a5a;
  --color-ansi-bright-green:   #5af0d8;
  --color-ansi-bright-yellow:  #c990f7;
  --color-ansi-bright-blue:    #9eceff;
  --color-ansi-bright-magenta: #d9a8fa;
  --color-ansi-bright-cyan:    #3de8c8;
  --color-ansi-bright-white:   var(--color-console-fg);

  /* Misc */
  --color-gold:    #b06ef3;
  --color-white:   #ffffff;
  --color-pure-black: #000000;

  /* Diff */
  --color-diff-removed-word-bg:  #4a1f4a;
  --color-diff-added-word-bg:    #1a3a35;
  --color-diff-removed-row-bg:   #321428;
  --color-diff-moved-row-bg:     #2e2944;
  --color-diff-added-row-bg:     #102820;
  --color-diff-removed-row-border: #6e28c0;
  --color-diff-moved-row-border:   #4a4068;
  --color-diff-added-row-border:   #1b3a30;
  --color-diff-inactive:         var(--zx-650);

  /* Alerts */
  --color-error-border:    #6e28c0;
  --color-error-bg:        #2e1040;
  --color-error-bg-active: #4a1f60;
  --color-error-bg-hover:  #4a1f60;
  --color-error-text:      #f0e0ff;

  --color-success-border:  #1f6e3c;
  --color-success-bg:      #102820;
  --color-success-text:    #3de8c8;

  --color-warning-border:  #4a4068;
  --color-warning-bg:      #2e2944;
  --color-warning-text:    #c990f7;

  --color-info-border:     #2e50b0;
  --color-info-bg:         #1a2050;
  --color-info-text:       var(--zx-100);

  /* Badges */
  --color-red-badge:            #b91c1c;
  --color-red-badge-bg:         #b91c1c22;
  --color-red-badge-hover-bg:   #b91c1c44;
  --color-green-badge:          #16a34a;
  --color-green-badge-bg:       #16a34a22;
  --color-green-badge-hover-bg: #16a34a44;
  --color-yellow-badge:         #3de8c8;
  --color-yellow-badge-bg:      #3de8c822;
  --color-yellow-badge-hover-bg:#3de8c844;
  --color-orange-badge:         #b06ef3;
  --color-orange-badge-bg:      #b06ef322;
  --color-orange-badge-hover-bg:#b06ef344;

  /* Thin labels (oklch) */
  --thin-lightness:   .68;
  --regular-chroma:   .19;
  --color-thin-green:  oklch(var(--thin-lightness) var(--regular-chroma) 180deg);
  --color-thin-red:    oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
  --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 321deg);
  --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 201deg);
  --thin-lightness-highlight:     .75;
  --color-thin-red-highlight:     oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
  --bg-lightness:  .12;
  --bg-chroma:     .04;
  --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 321deg);

  /* Layout */
  --color-body:             var(--zx-800);
  --color-box-header:       var(--zx-700);
  --color-box-body:         var(--zx-750);
  --color-box-body-highlight: var(--zx-650);
  --color-text-dark:        #fff;
  --color-text:             var(--zx-100);
  --color-text-light:       var(--zx-150);
  --color-text-light-1:     var(--zx-150);
  --color-text-light-2:     var(--zx-200);
  --color-text-light-3:     var(--zx-300);
  --color-footer:           var(--zx-900);
  --color-timeline:         var(--zx-650);
  --color-input-text:       var(--zx-100);
  --color-input-background: var(--zx-650);
  --color-input-toggle-background: var(--zx-650);
  --color-input-border:     var(--zx-550);
  --color-input-border-hover: var(--zx-450);
  --color-header-wrapper:   var(--zx-850);
  --color-header-wrapper-transparent: #09080d00;
  --color-light:            #00000028;
  --color-light-mimic-enabled: rgba(0,0,0,calc(40/255*222/255/var(--opacity-disabled)));
  --color-light-border:     #ffffff18;
  --color-hover:            var(--zx-600);
  --color-active:           var(--zx-650);
  --color-menu:             var(--zx-700);
  --color-card:             var(--zx-700);
  --fancy-card-bg:          var(--zx-650);
  --fancy-card-border:      var(--zx-600);
  --color-markup-table-row: #ffffff06;
  --color-markup-code-block: var(--zx-800);
  --color-markup-code-inline: var(--zx-850);
  --color-button:           var(--zx-600);
  --color-code-bg:          var(--zx-750);
  --color-shadow:           #00000070;
  --color-secondary-bg:     var(--zx-700);
  --color-text-focus:       #fff;
  --color-expand-button:    #2e2944;
  --color-placeholder-text: var(--color-text-light-3);
  --color-editor-line-highlight: var(--zx-700);
  --color-project-board-bg: var(--color-secondary-light-3);
  --color-project-board-dark-label: var(--color-text-light-3);
  --color-caret:            var(--color-text);
  --color-reaction-bg:      #ffffff10;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg:  var(--color-primary-alpha-40);
  --color-tooltip-text:     #ffffff;
  --color-tooltip-bg:       #000000f0;
  --color-nav-bg:           var(--zx-900);
  --color-nav-hover-bg:     var(--zx-600);
  --color-nav-text:         var(--color-text);
  --color-secondary-nav-bg: var(--color-body);
  --color-label-text:       #fff;
  --color-label-bg:         var(--zx-600);
  --color-label-hover-bg:   var(--zx-550);
  --color-label-active-bg:  var(--zx-500);
  --color-label-bg-alt:     var(--zx-550);
  --color-accent:           var(--color-primary-light-1);
  --color-small-accent:     var(--color-primary-light-5);
  --color-highlight-fg:     var(--color-primary-light-4);
  --color-highlight-bg:     var(--color-primary-alpha-20);
  --color-overlay-backdrop: #09080dc0;
  --checkerboard-color-1:   #2e2944;
  --checkerboard-color-2:   #1e1a2e;

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

/* --- Emoji inversion -------------------------------------- */

.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}

/* --- UI overrides ----------------------------------------- */

i.grey.icon.icon.icon.icon {
  color: var(--zx-350) !important;
}

.ui.secondary.vertical.menu {
  border-radius: .28571429rem !important;
  overflow: hidden;
}

.ui.basic.primary.button.item {
  background-color: var(--color-active) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.ui.red.label.notification_count,
.ui.primary.label,
.ui.primary.labels .label {
  background-color: var(--color-primary-light-3) !important;
}

.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
  background-color: var(--color-light) !important;
}

#review-box .review-comments-counter {
  background-color: var(--color-shadow) !important;
  color: var(--color-white) !important;
  margin-left: .5em;
}

.ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label {
  color: var(--color-text-dark) !important;
}

.ui.yellow.label.pending-label {
  color: var(--color-warning-text) !important;
}

::selection {
  background: var(--zx-100) !important;
  color: var(--color-pure-black) !important;
}

strong.attention-important,
svg.attention-important { color: var(--color-violet-light) }

strong.attention-note,
svg.attention-note       { color: var(--color-blue-light) }

strong.attention-caution,
svg.attention-caution    { color: var(--color-red-light) }

.ui.basic.red.button {
  background-color: var(--color-red);
  color: var(--color-white);
}
.ui.basic.red.button:hover,
.ui.basic.red.button:focus {
  background-color: var(--color-red-dark-1);
  color: var(--color-white);
}
.ui.basic.red.button:active {
  background-color: var(--color-red-dark-2);
  color: var(--color-white);
}