:root {
  --is-dark: true;
  color-scheme: dark;

  /* Custom palette:
     background: #0c0d11
     sub alt:    #171a25
     sub:        #454864
     text:       #f6f5f5
     main/caret: #7ebab5
     error:      #ff4754
     extra error:#b02a33
  */

  --steel-50: #ffffff;
  --steel-100: #f6f5f5;
  --steel-150: #e3e4ee;
  --steel-200: #c8cad8;
  --steel-250: #a5a8bc;
  --steel-300: #8487a0;
  --steel-350: #6b6e85;
  --steel-400: #555874;
  --steel-450: #454864;
  --steel-500: #383b54;
  --steel-550: #2d3044;
  --steel-600: #232637;
  --steel-650: #1c1f2e;
  --steel-700: #171a25;
  --steel-750: #13151f;
  --steel-800: #0f1118;
  --steel-850: #0c0d11;
  --steel-900: #0c0d11;

  /* Primary color */
  --color-primary: #7ebab5;
  --color-primary-contrast: #0c0d11;
  --color-primary-dark-1: #6ea6a1;
  --color-primary-dark-2: #5f938e;
  --color-primary-dark-3: #50807b;
  --color-primary-dark-4: #416d68;
  --color-primary-dark-5: #325a55;
  --color-primary-light-1: #8bc2bd;
  --color-primary-light-2: #9ccac5;
  --color-primary-light-3: #add2cd;
  --color-primary-light-4: #bedad5;
  --color-primary-light-5: #cfe2dd;
  --color-primary-light-6: #e0eae5;
  --color-primary-light-7: #f1f2ed;
  --color-primary-alpha-10: #7ebab51a;
  --color-primary-alpha-20: #7ebab533;
  --color-primary-alpha-30: #7ebab54d;
  --color-primary-alpha-40: #7ebab566;
  --color-primary-alpha-50: #7ebab580;
  --color-primary-alpha-60: #7ebab599;
  --color-primary-alpha-70: #7ebab5b3;
  --color-primary-alpha-80: #7ebab5cc;
  --color-primary-alpha-90: #7ebab5e6;

  /* Structural backgrounds */
  --color-body: #0c0d11;
  --color-box-header: #171a25;
  --color-box-body: #0f1118;
  --color-box-body-highlight: #171a25;
  --color-header-wrapper: #0c0d11;
  --color-header-wrapper-transparent: #0c0d1100;
  --color-footer: #0c0d11;
  --color-nav-bg: #0c0d11;
  --color-nav-hover-bg: #1c1f2e;
  --color-secondary-nav-bg: #171a25;
  --color-card: #171a25;
  --fancy-card-bg: #171a25;
  --fancy-card-border: #454864;
  --color-secondary-bg: #171a25;
  --color-code-bg: #0f1118;
  --color-markup-code-block: #0f1118;
  --color-markup-code-inline: #171a25;
  --color-markup-table-row: #ffffff06;

  /* Text & Caret */
  --color-text: #f6f5f5;
  --color-text-dark: #f6f5f5;
  --color-text-light: #c8cad8;
  --color-text-light-1: #c8cad8;
  --color-text-light-2: #a5a8bc;
  --color-text-light-3: #8487a0;
  --color-text-focus: #ffffff;
  --color-placeholder-text: #6b6e85;
  --color-caret: #7ebab5;
  --color-accent: #7ebab5;
  --color-small-accent: #8bc2bd;
  --color-highlight-fg: #9ccac5;
  --color-highlight-bg: #7ebab533;

  /* Inputs, Controls & Buttons */
  --color-input-background: #171a25;
  --color-input-toggle-background: #171a25;
  --color-input-text: #f6f5f5;
  --color-input-border: #454864;
  --color-input-border-hover: #7ebab5;
  --color-timeline: #454864;
  --color-button: #1c1f2e;
  --color-hover: #262a3e;
  --color-active: #323751;
  --color-menu: #171a25;
  --color-light-border: #45486480;

  /* Errors & Badges */
  --color-red: #ff4754;
  --color-error-text: #ff4754;
  --color-error-border: #b02a33;
  --color-error-bg: #2a1014;
  --color-error-bg-active: #3a131a;
  --color-error-bg-hover: #3a131a;
  --color-red-badge: #ff4754;
  --color-red-badge-bg: #ff475422;
  --color-red-badge-hover-bg: #ff475444;

  /* Selection & Shadows */
  --color-shadow: #00000080;
  --color-selection-bg: #7ebab544;
  --color-selection-fg: #f6f5f5;
  accent-color: #7ebab5;
}

body, .full.height {
  background-color: var(--color-body) !important;
  color: var(--color-text) !important;
}

/* ============================
   BUTTONS STYLING & HOVER FIX
   ============================ */

/* Standard UI Button */
.ui.button, .ui.buttons .button {
  background-color: #1c1f2e !important;
  color: #f6f5f5 !important;
  border: 1px solid #454864 !important;
  box-shadow: none !important;
}

.ui.button:hover, .ui.buttons .button:hover {
  background-color: #282d42 !important;
  color: #ffffff !important;
  border-color: #7ebab5 !important;
  box-shadow: none !important;
}

.ui.button:focus, .ui.buttons .button:focus {
  background-color: #282d42 !important;
  color: #ffffff !important;
  border-color: #7ebab5 !important;
}

.ui.button:active, .ui.buttons .button:active, .ui.active.button {
  background-color: #343a56 !important;
  color: #ffffff !important;
  border-color: #7ebab5 !important;
}

/* Primary Button */
.ui.primary.button, .ui.button.primary, .ui.primary.buttons .button {
  background-color: #7ebab5 !important;
  color: #0c0d11 !important;
  border: 1px solid #7ebab5 !important;
  font-weight: 600 !important;
}

.ui.primary.button:hover, .ui.button.primary:hover, .ui.primary.buttons .button:hover {
  background-color: #92d0ca !important;
  color: #0c0d11 !important;
  border-color: #92d0ca !important;
}

.ui.primary.button:focus, .ui.button.primary:focus {
  background-color: #92d0ca !important;
  color: #0c0d11 !important;
  border-color: #92d0ca !important;
}

.ui.primary.button:active, .ui.button.primary:active {
  background-color: #6ea6a1 !important;
  color: #0c0d11 !important;
  border-color: #6ea6a1 !important;
}

/* Basic Buttons */
.ui.basic.button, .ui.basic.buttons .button {
  background-color: transparent !important;
  color: #f6f5f5 !important;
  border: 1px solid #454864 !important;
  box-shadow: none !important;
}

.ui.basic.button:hover, .ui.basic.buttons .button:hover {
  background-color: #1c1f2e !important;
  color: #7ebab5 !important;
  border-color: #7ebab5 !important;
}

.ui.basic.button:focus {
  background-color: #1c1f2e !important;
  color: #7ebab5 !important;
  border-color: #7ebab5 !important;
}

.ui.basic.primary.button {
  color: #7ebab5 !important;
  border-color: #7ebab5 !important;
}

.ui.basic.primary.button:hover {
  background-color: #7ebab522 !important;
  color: #92d0ca !important;
  border-color: #92d0ca !important;
}

/* Red / Negative Buttons */
.ui.red.button, .ui.negative.button {
  background-color: #ff4754 !important;
  color: #ffffff !important;
  border: 1px solid #b02a33 !important;
}

.ui.red.button:hover, .ui.negative.button:hover {
  background-color: #ff606b !important;
  color: #ffffff !important;
  border-color: #ff4754 !important;
}

.ui.basic.red.button {
  color: #ff4754 !important;
  border-color: #ff4754 !important;
  background-color: transparent !important;
}

.ui.basic.red.button:hover {
  background-color: #ff475422 !important;
  color: #ff606b !important;
  border-color: #ff606b !important;
}

/* Green / Positive Buttons */
.ui.green.button, .ui.positive.button {
  background-color: #1e6b42 !important;
  color: #ffffff !important;
  border: 1px solid #278854 !important;
}

.ui.green.button:hover, .ui.positive.button:hover {
  background-color: #278854 !important;
  color: #ffffff !important;
}

/* Menus, Dropdowns, Cards */
.ui.menu {
  background-color: var(--color-card) !important;
  border-color: var(--color-input-border) !important;
}

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

.ui.menu .item:hover {
  background-color: #1c1f2e !important;
  color: var(--color-primary) !important;
}

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

.ui.dropdown .menu {
  background-color: #171a25 !important;
  border: 1px solid #454864 !important;
}

.ui.dropdown .menu>.item {
  color: #f6f5f5 !important;
}

.ui.dropdown .menu>.item:hover {
  background-color: #1c1f2e !important;
  color: #7ebab5 !important;
}

/* Segment / Box / Card borders */
.ui.segment, .ui.segments, .ui.attached.segment {
  border-color: #454864 !important;
}