@use "variables";

:root {
  --fwe-black: #000000;
  --fwe-white: #ffffff;
  --fwe-white-hover: #ededed;
  --fwe-caerul: #0091dc;
  --fwe-sucaerul: #c8e6fa;
  --fwe-sucanul: #e2e5e8;

  --fwe-gray-100: #f0f2f3;
  --fwe-gray-200: #e2e5e8;
  --fwe-gray-300: #d3d8dd;
  --fwe-gray-400: #b6bec6;

  --fwe-text: #333333;
  --fwe-text-light: #82868b;
  --fwe-text-disabled: #b9babb;

  --fwe-hero: #0091dc;
  --fwe-hero-hover: #0588cb;
  --fwe-hero-active: #0a7eba;
  --fwe-hero-gray: #a3b2bc;
  --fwe-hero-bg: #c8e6fa;

  --fwe-green: #80ca3d;
  --fwe-yellow: #ffd600;
  --fwe-orange: #ff9600;
  --fwe-red: #d50000;
  --fwe-green-hover: #73b637;
  --fwe-yellow-hover: #e6c100;
  --fwe-orange-hover: #e68700;
  --fwe-red-hover: #c00000;
  --fwe-orange-active: #d6820a;
  --fwe-red-active: #b50a0a;
  --fwe-orange-bg: #fbf0e1;
  --fwe-red-bg: #f7e1e1;

  --fwe-control: #d3d8dd;
  --fwe-control-hover: #c5cbd1;
  --fwe-control-active: #a9b0b7; // 80% * --fwe-gray-300 + 20% * #333333
  --fwe-control-disabled: #e2e5e8; // 64% * --fwe-gray-300 + 36% * #FFFFFF
  --fwe-control-border: #b6bec6; // OK
  --fwe-control-border-hover: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
  --fwe-control-border-active: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
  --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-hover + 20% * #FFFFFF

  --fwe-border: #d3d8dd;
  --fwe-border-disabled: #e2e5e8; // 64% * --fwe-gray-300 + 36% * #FFFFFF

  --fwe-background: #f0f2f3;

  @each $name, $size in variables.$grid-breakpoints {
    --fwe-breakpoint-#{$name}: #{$size};
  }

  @each $name, $size in variables.$grid-breakpoints-min {
    --fwe-breakpoint-#{$name}: #{$size};
  }

  @each $spacing, $space in variables.$spacers {
    --fwe-spacer-#{$spacing}: #{$space};
  }

  --fwe-font-family-sans-serif: "Festo", "Trebuchet MS", Arial, sans-serif;
  --fwe-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fwe-font-weight-normal: 400;
  --fwe-font-weight-bold: 700;
  --fwe-line-height-base: 1.5;
  --fwe-font-feature-settings: "tnum", "lnum";
  --fwe-font-variant-numeric: lining-nums tabular-nums diagonal-fractions ordinal;

  --fwe-font-size-small: 12px;
  --fwe-font-size-md: 14px;
  --fwe-font-size-base: 16px;
  --fwe-font-size-xl: 24px;
  --fwe-font-size-xxl: 32px;

  --fwe-z-index-sticky: 1000;
  --fwe-z-index-fixed: 1010;
  --fwe-z-index-modal-backdrop: 1020;
  --fwe-z-index-modal: 1030;
  --fwe-z-index-dropdown: 1040;
  --fwe-z-index-popover: 1050;
  --fwe-z-index-tooltip: 1060;
  --fwe-z-index-snackbar: 1070;

  --fwe-textarea-row-const: 33px; // rowheight + margin-top + margin-bottom + 1px-line
}