// Constants for calculations
@bgDarken: 40%;
@disabledDarken: 15%;
@bgTransparency: 10%;
@bgHighlight: 5%;
@fgHighlight: 10%;

// Foreground colors
@fg: #CCC;
@muted: #999;
@primary: #FF8C0D; // Light Orange
@secondary: #1FB0FF;  // Light blue
@warning: #FF3B00;  // Dark Orange
@disabled: #555;    // Light grey
@success: #71a052;    // Green
@purple: #800080;    // Purple
@primary-disabled: darken(@primary, @disabledDarken);
@secondary-disabled: darken(@secondary, @disabledDarken);
@warning-disabled: darken(@warning, @disabledDarken);

// Background colors
@bg: rgba(30,30,30,1);
@bgBlack: #000;
@primary-bg: fadeout(darken(@primary, 47%), 15%);
@alt-primary-bg: fadeout(darken(@primary, 42%), 15%); // Lighter brown background
@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Blue background
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red

@alt-primary-bg-highlighted: lighten(@alt-primary-bg, @bgHighlight);
@fg-highlighted: lighten(@fg, @fgHighlight);
@primary-darker: darken(@primary, 30%);



.fg {
  color: @fg;
  stroke: @fg;
  fill: @fg;
}

.muted {
  color: @muted;
  stroke: @muted;
  fill: @muted;
}

.disabled {
  color: @disabled;
  stroke: @disabled;
  fill: @disabled;
}

.primary {
  color: @primary;
  stroke: @primary;
  fill: @primary;
}

.primary-bg {
  color: @primary-bg;
  stroke: @primary-bg;
  fill: @primary-bg;
}

.primary-disabled {
  color: @primary-disabled;
  stroke: @primary-disabled;
  fill: @primary-disabled;
}

.secondary {
  color: @secondary;
  stroke: @secondary;
  fill: @secondary;
}

.secondary-disabled {
  color: @secondary-disabled;
  stroke: @secondary-disabled;
  fill: @secondary-disabled;
}

.warning {
  color: @warning;
  stroke: @warning;
  fill: @warning;
}

.warning-disabled {
  color: @warning-disabled;
  stroke: @warning-disabled;
  fill: @warning-disabled;
}

.bg-warning-disabled {
  background-color: @warning-disabled;
}
