@use "./functions" as *;

$primary-color: #1473e6;
$error-color: #e64e48;
$success-color: #2bc784;
$warning-color: #ffcc00;
// colors
$blue: #4b9bff;
$orange: #ffb46e;
$red: #ff5f5f;
$teal: #50d2a0;
$pink: #ff73c3;
$green: #9be169;
$purple: #af78ff;
$yellow: #ffd76e;
$cyan: #5fc8ff;
$indigo: #7785ff;
$white: #ffffff;
$pico: #1c2852;
$grayish: #dee6f3;
$cuddle: #bdcee8;
$denim: $primary-color;
$black: #000000;
$transparent: transparent;

$grey: #586069;

$grey-darker: #24292e;
$grey-bg: #f7f7f7;
$grey-lighter: #e8e8e8;
$grey-light-xx: #d4d4d4;
$primary-dark: #243969;
$primary-darker: #142447;
$primary-bg: #f7faff;
$primary-lighter: #dfe6f7;
$primary-light: #7a94cc;

// tinted colors
$primary-color-110: #1266cc;
$primary-color-90: #2c81e9;
$primary-color-80: #438feb;
$primary-color-70: #5b9dee;
$primary-color-60: #72abf0;
$primary-color-50: #89b9f2;
$primary-color-40: #a1c7f5;
$primary-color-30: #d0e3fa;
$primary-color-25: #c4dcf9;
$primary-color-20: #dceafb;
$primary-color-10: #e8f1fc;
$primary-color-5: #f3f8fe;

$pico-100: #1c2852;
$pico-90: #2a355a;
$pico-80: #414b6d;
$pico-70: #606986;
$pico-60: #6b728b;
$pico-50: #83899e;
$pico-40: #a4a9ba;
$pico-30: #b5b9c5;
$pico-20: #d2d4dc;
$pico-10: #e8eaee;
$pico-5: #f4f4f6;
$pico-2: #fafafb;

$cuddle-110: #90afda;
$cuddle-70: #d1ddef;
$cuddle-50: #dee6f3;
$cuddle-30: #ebf0f8;
$cuddle-20: #f2f5fa;
$cuddle-10: #f8fafd;

$mark-color: #fffac1;

$warning-color-80: #edc949;
$warning-color-50: #f4dd8d;
$warning-color-25: #fff2bf;
$warning-color-10: #fffae6;
$warning-color-5: #f7f7f3;

$success-color-100: #2bc784;
$success-color-80: #55d29d;
$success-color-50: #95e3c2;
$success-color-25: #caf1e0;
$success-color-10: #eaf9f3;
$success-color-5: #eef7f8;

$error-color-80: #eb716d;
$error-color-50: #f3a7a4;
$error-color-25: #f9d3d1;
$error-color-10: #fdeded;
$error-color-5: #f7f1f5;

// border
$border-width-main: 0.0625rem solid;
$border-color-main: $primary-color-10;
$border-main: $border-width-main $border-color-main;
$border-separator: $border-width-main $primary-color-20;
$border-main-darker: $border-width-main $primary-color-40;
$border-main-active: $border-width-main $primary-color-50;
$border-grey: $border-width-main $cuddle-50;
$border-grey-light: $border-width-main $cuddle-30;
$border-grey-lighter: $border-width-main $cuddle-20;
$border-transparent: $border-width-main $transparent;
$border-dark: $border-width-main $pico-30;
$border-dark-lighter: $border-width-main $pico-20;
$border-radius-main: 0.375rem;
$radius-main: 0.375rem;

$border-radius-xss: 0.125rem;
$border-radius-xs: 0.1875rem;
$border-radius-sm: 0.25rem;
$border-radius-md: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-xl: 1rem;
$border-radius-circle: 50%;
// text
$text-color: $pico-80;
$text-color-50: $pico-50;
$text-xxxs: 0.5rem;
$text-xxs: 0.625rem;
$text-xs: 0.6875rem;
$text-sm: 0.75rem;
$text-md: 0.875rem;
$text-lg: 1rem;
$text-xl: 1.125rem;
$text-xxl: 1.5rem;
$text-xxxl: 2.25rem;
$xs: 23.5em; // 376px @media (max-width: $xs) {}
$sm: 36em; // (min-width: 576px)
$md: 48em; // (min-width: 768px)
$lg: 62em; // (min-width: 992px)
$gl: 64em; //! gap `lg - xl` (min-width: 1024px)
$xl: 75em; // (min-width: 1200px)
$xxl: 80em; // (min-width: 1280px)

// font weight

$font-300: 250;
$font-400: 350;
$font-500: 450;
$font-600: 550;
$font-700: 650;
$font-800: 750;
$font-900: 850;

// space
$space-unit: 1rem;
$space-xxxxxs: $space-unit * 0.0625;
$space-xxxxs: $space-unit * 0.125;
$space-xxxs: $space-unit * 0.25;
$space-xxs: $space-unit * 0.375;
$space-xs: $space-unit * 0.5;
$space-sm: $space-unit * 0.75;
$space-md: $space-unit * 1.25;
$space-lg: $space-unit * 1.5;
// - to container
$col-sm: 540px; // (max-width: 540px)
$col-md: 720px; // (max-width: 720px)
$col-lg: 960px; // (max-width: 960px)
$col-xl: 1140px; // (max-width: 1140px)
$col-xxl: 1420px; // (max-width: 1420px)
$breakpoints: (
  sm: $sm,
  md: $md,
  lg: $lg,
  xl: $xl,
  xxl: $xxl,
);
$run-overview-sidebar-width: 20rem;
$container-max-width-without-paddings: 86.75rem;
$tooltip-max-height: 18.75rem;
$popover-opening-duration: 0.18s;
