@hue: 180;

@f_high: hsl(@hue, 30%, 90%);
@f_med: hsl(@hue, 16%, 83%);
@f_low: hsl(@hue, 10%, 77%);


@b_high: #333333;
@b_med: #242424;
@b_low: #1a1a1a;
@background: #0f0f0f;

@b_inv: hsl(@hue, 42%, 70%); 

body, .dark-theme, .butter-theme, .silver-theme {
  --bg-surface: @background;
  --bg-surface-transparent: fade(@background, 0);
  --bg-surface-low: @b_low;
  --bg-surface-low-transparent: fade(@b_low, 0);
  --bg-surface-extra-low: @b_med;
  --bg-surface-extra-low-transparent: fade(@b_med, 0);
  --bg-surface-hover: @b_med;
  --bg-surface-active: @b_high;
  --bg-surface-border: @b_high;
  --bg-primary: @b_inv;
  --bg-primary-hover: @b_inv;
  --bg-primary-active: @b_inv;
  --bg-primary-border: @b_inv;
  --bg-tooltip: #000;
  --bg-badge: @f_high;
  --bg-ping: @f_high;
  --bg-ping-hover: @f_high;
  --bg-divider: @b_low;
  --tc-surface-high: @f_high;
  --tc-surface-normal: @f_med;
  --tc-surface-normal-low: @f_low;
  --tc-surface-low: @f_low;
  --tc-primary-high: @f_high;
  --tc-primary-normal: @f_med;
  --tc-primary-low: @f_low;
  --tc-code: #e565b1;
  --tc-link: @b_inv;
  --tc-badge: black;
  --ic-surface-high: @f_high;
  --ic-surface-normal: @f_high;
  --ic-surface-low: @f_high;
  --ic-primary-normal: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 60%);
  --bg-overlay-low: rgba(0, 0, 0, 80%);
  --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
  --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
  --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
  --fs-h1: 35.6px;
  --fs-h2: 23.6px;
  --fs-s1: 17.6px;
  --fs-b1: 14.6px;
  --ls-b1: .14px;
  --fs-b2: 13.2px;
  --fs-b3: 11.2px;
  --fw-normal: 350;
  --font-primary: sans-serif;
  --font-secondary: sans-serif;
}