@import "../chroma/dark.css";
@import "../codemirror/dark.css";
@import "../markup/dark.css";

:root {
  /* ── Warm walnut palette (replaces cold steel-*) ── */
  --walnut-900: #111009;
  --walnut-850: #15130d;
  --walnut-800: #1a1714;
  --walnut-750: #201d18;
  --walnut-700: #26231d;
  --walnut-650: #2d2923;
  --walnut-600: #35302a;
  --walnut-550: #3e3830;
  --walnut-500: #4a4439;
  --walnut-450: #575044;
  --walnut-400: #655d50;
  --walnut-350: #746b5d;
  --walnut-300: #8a8070;
  --walnut-250: #a09585;
  --walnut-200: #b6aa99;
  --walnut-150: #ccbfae;
  --walnut-100: #e0d4c3;

  --is-dark-theme: true;

  /* ── Primary accent: warm amber ── */
  --color-primary: #d4845a;
  --color-primary-contrast: #000;
  --color-primary-dark-1: #e8a07a;
  --color-primary-dark-2: #e8a07a;
  --color-primary-dark-3: #f0b898;
  --color-primary-dark-4: #f0b898;
  --color-primary-dark-5: #f8d4be;
  --color-primary-dark-6: #f8d4be;
  --color-primary-dark-7: #fdf0e8;
  --color-primary-light-1: #c0704a;
  --color-primary-light-2: #a85c3a;
  --color-primary-light-3: #8c4828;
  --color-primary-light-4: #74361a;
  --color-primary-light-5: #74361a;
  --color-primary-light-6: #5c2810;
  --color-primary-light-7: #5c2810;
  --color-primary-alpha-10: #c0704a19;
  --color-primary-alpha-20: #c0704a33;
  --color-primary-alpha-30: #c0704a4b;
  --color-primary-alpha-40: #c0704a66;
  --color-primary-alpha-50: #c0704a80;
  --color-primary-alpha-60: #c0704a99;
  --color-primary-alpha-70: #c0704ab3;
  --color-primary-alpha-80: #c0704acc;
  --color-primary-alpha-90: #c0704ae1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* ── Secondary: warm walnut tones ── */
  --color-secondary: var(--walnut-700);
  --color-secondary-dark-1: var(--walnut-550);
  --color-secondary-dark-2: var(--walnut-500);
  --color-secondary-dark-3: var(--walnut-450);
  --color-secondary-dark-4: var(--walnut-400);
  --color-secondary-dark-5: var(--walnut-350);
  --color-secondary-dark-6: var(--walnut-300);
  --color-secondary-dark-7: var(--walnut-250);
  --color-secondary-dark-8: var(--walnut-200);
  --color-secondary-dark-9: var(--walnut-150);
  --color-secondary-dark-10: var(--walnut-100);
  --color-secondary-dark-11: var(--walnut-100);
  --color-secondary-dark-12: var(--walnut-100);
  --color-secondary-dark-13: var(--walnut-100);
  --color-secondary-light-1: var(--walnut-650);
  --color-secondary-light-2: var(--walnut-700);
  --color-secondary-light-3: var(--walnut-750);
  --color-secondary-light-4: var(--walnut-800);
  --color-secondary-alpha-10: #2d292319;
  --color-secondary-alpha-20: #2d292333;
  --color-secondary-alpha-30: #2d29234b;
  --color-secondary-alpha-40: #2d292366;
  --color-secondary-alpha-50: #2d292380;
  --color-secondary-alpha-60: #2d292399;
  --color-secondary-alpha-70: #2d2923b3;
  --color-secondary-alpha-80: #2d2923cc;
  --color-secondary-alpha-90: #2d2923e1;
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);

  /* ── Console colors ── */
  --color-console-fg: #ded5c5;
  --color-console-fg-subtle: #8a806e;
  --color-console-bg: #19160f;
  --color-console-border: #35302a;
  --color-console-hover-bg: #ffffff16;
  --color-console-active-bg: #46403a;
  --color-console-menu-bg: #35302a;
  --color-console-menu-border: #57514a;

  /* ── Named colors (warmed) ── */
  --color-red:    #b94040;
  --color-orange: #c0704a;
  --color-yellow: #c09030;
  --color-olive:  #8a9820;
  --color-green:  #3a8c50;
  --color-teal:   #2a8a80;
  --color-blue:   #4878c0;
  --color-violet: #7858c0;
  --color-purple: #9050c8;
  --color-pink:   #c04878;
  --color-brown:  #a07050;
  --color-grey:   var(--walnut-500);
  --color-black:  #0f0e0a;

  --color-red-light:    #cc5050;
  --color-orange-light: #d4845a;
  --color-yellow-light: #d4a840;
  --color-olive-light:  #7d8820;
  --color-green-light:  #4a9e60;
  --color-teal-light:   #3aaa9e;
  --color-blue-light:   #5a8ed4;
  --color-violet-light: #8a70d4;
  --color-purple-light: #a868e0;
  --color-pink-light:   #d45a8a;
  --color-brown-light:  #906050;
  --color-grey-light:   var(--walnut-300);
  --color-black-light:  #1a180f;

  --color-red-dark-1:    #a83838;
  --color-orange-dark-1: #ae6040;
  --color-yellow-dark-1: #b08028;
  --color-olive-dark-1:  #7d8820;
  --color-green-dark-1:  #347a44;
  --color-teal-dark-1:   #247870;
  --color-blue-dark-1:   #3868b0;
  --color-violet-dark-1: #6448b0;
  --color-purple-dark-1: #7c40c0;
  --color-pink-dark-1:   #b03870;
  --color-brown-dark-1:  #906050;
  --color-black-dark-1:  #0d0c08;

  --color-red-dark-2:    #983030;
  --color-orange-dark-2: #9c5438;
  --color-yellow-dark-2: #c09030;
  --color-olive-dark-2:  #8a9820;
  --color-green-dark-2:  #3a8c50;
  --color-teal-dark-2:   #1e6860;
  --color-blue-dark-2:   #4878c0;
  --color-violet-dark-2: #5438a8;
  --color-purple-dark-2: #7858c0;
  --color-pink-dark-2:   #9c3060;
  --color-brown-dark-2:  #a07050;
  --color-black-dark-2:  #0f0e0a;

  /* ── ANSI (actions console) ── */
  --color-ansi-black:         #1e1b14;
  --color-ansi-red:           #c05050;
  --color-ansi-green:         #7aa860;
  --color-ansi-yellow:        #c09030;
  --color-ansi-blue:          #4878b8;
  --color-ansi-magenta:       #b84888;
  --color-ansi-cyan:          #3a8880;
  --color-ansi-white:         var(--color-console-fg-subtle);
  --color-ansi-bright-black:  #3e3830;
  --color-ansi-bright-red:    #c86060;
  --color-ansi-bright-green:  #8ab870;
  --color-ansi-bright-yellow: #d4aa40;
  --color-ansi-bright-blue:   #5888c4;
  --color-ansi-bright-magenta:#c85898;
  --color-ansi-bright-cyan:   #4aa89e;
  --color-ansi-bright-white:  var(--color-console-fg);

  /* ── Other colors ── */
  --color-gold:  #b09030;
  --color-white: #f8f0e8;
  --color-pure-black: #000000;

  /* ── Diff colors (warm) ── */
  --color-diff-removed-word-bg:  #6a3020;
  --color-diff-added-word-bg:    #1e5030;
  --color-diff-removed-row-bg:   #3d1e18;
  --color-diff-moved-row-bg:     #6a4510;
  --color-diff-added-row-bg:     #182e20;
  --color-diff-removed-row-border: #6a3020;
  --color-diff-moved-row-border:   #9a6818;
  --color-diff-added-row-border:   #1e5030;
  --color-diff-inactive: var(--walnut-650);

  /* ── Status colors ── */
  --color-error-border:    #6a3020;
  --color-error-bg:        #4a2018;
  --color-error-bg-active: #6a3020;
  --color-error-bg-hover:  #6a3020;
  --color-error-text:      #fde8e8;
  --color-success-border:  #1e5830;
  --color-success-bg:      #183820;
  --color-success-text:    #a0e0b0;
  --color-warning-border:  #9a6818;
  --color-warning-bg:      #503818;
  --color-warning-text:    #f0e080;
  --color-info-border:     #284898;
  --color-info-bg:         #203060;
  --color-info-text:       var(--walnut-100);

  /* ── Badges ── */
  --color-red-badge:            #b94040;
  --color-red-badge-bg:         #b9404022;
  --color-red-badge-hover-bg:   #b9404044;
  --color-green-badge:          #3a8c50;
  --color-green-badge-bg:       #3a8c5022;
  --color-green-badge-hover-bg: #3a8c5044;
  --color-yellow-badge:         #c09030;
  --color-yellow-badge-bg:      #c0903022;
  --color-yellow-badge-hover-bg:#c0903044;
  --color-orange-badge:         #c0704a;
  --color-orange-badge-bg:      #c0704a22;
  --color-orange-badge-hover-bg:#c0704a44;

  /* ── Thin element colors ── */
  --thin-lightness: 0.65;
  --regular-chroma: 0.16;
  --color-thin-green:  oklch(var(--thin-lightness) var(--regular-chroma) 145deg);
  --color-thin-red:    oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
  --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 298deg);
  --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 41deg);
  --thin-lightness-highlight: 0.72;
  --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);

  /* ── Danger bg ── */
  --bg-lightness: 0.24;
  --bg-chroma: 0.05;
  --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 27deg);

  /* ── Target-based (main layout) colors ── */
  --color-body:                  var(--walnut-800);
  --color-box-header:            var(--walnut-700);
  --color-box-body:              var(--walnut-750);
  --color-box-body-highlight:    var(--walnut-650);
  --color-text-dark:             #f0e8d8;
  --color-text:                  var(--walnut-100);
  --color-text-light:            var(--walnut-150);
  --color-text-light-1:          var(--walnut-150);
  --color-text-light-2:          var(--walnut-200);
  --color-text-light-3:          var(--walnut-200);
  --color-footer:                var(--walnut-900);
  --color-timeline:              var(--walnut-650);
  --color-input-text:            var(--walnut-100);
  --color-input-background:      var(--walnut-650);
  --color-input-toggle-background: var(--walnut-650);
  --color-input-border:          var(--walnut-550);
  --color-input-border-hover:    var(--walnut-450);
  --color-header-wrapper:        var(--walnut-850);
  --color-header-wrapper-transparent: #26231d00;
  --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(--walnut-600);
  --color-active:                var(--walnut-650);
  --color-menu:                  var(--walnut-700);
  --color-card:                  var(--walnut-700);
  --fancy-card-bg:               var(--walnut-650);
  --fancy-card-border:           var(--walnut-600);
  --color-markup-table-row:      #ffffff06;
  --color-markup-code-block:     var(--walnut-800);
  --color-markup-code-inline:    var(--walnut-850);
  --color-button:                var(--walnut-600);
  --color-code-bg:               var(--walnut-750);
  --color-shadow:                #00000060;
  --color-secondary-bg:          var(--walnut-700);
  --color-text-focus:            #f0e8d8;
  --color-expand-button:         #3a3428;
  --color-placeholder-text:      var(--color-text-light-3);
  --color-editor-line-highlight:  var(--walnut-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:           #ffffff12;
  --color-reaction-active-bg:    var(--color-primary-alpha-30);
  --color-reaction-hover-bg:     var(--color-primary-alpha-40);
  --color-tooltip-text:          #f0e8d8;
  --color-tooltip-bg:            #0f0e0af0;
  --color-nav-bg:                var(--walnut-900);
  --color-nav-hover-bg:          var(--walnut-600);
  --color-secondary-nav-bg:      var(--color-body);
  --color-label-text:            #f0e8d8;
  --color-label-bg:              var(--walnut-600);
  --color-label-hover-bg:        var(--walnut-550);
  --color-label-active-bg:       var(--walnut-500);
  --color-label-bg-alt:          var(--walnut-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:      #08070480;
  --color-selection-bg:          var(--walnut-100);
  --color-selection-fg:          var(--color-pure-black);
  --checkerboard-color-1:        #404040;
  --checkerboard-color-2:        #2c2c2c;

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

/* ── Carry over the emoji inversions & ui fixes from base dark theme ── */
.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);
}
i.grey.icon.icon.icon.icon {
  color: var(--walnut-350) !important;
}
.ui.secondary.vertical.menu {
  border-radius: 0.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: 0.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;
}
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);
}