Design Tokens (CSS variables)

--color-text-black: #000000;
  --color-text-white: #ffffff;
  --color-text-error: #88161f;


  --color-primary-light: #337ab7;
  --color-primary: #165788;
  --color-primary-dark: #{$base};
  
  --color-default: #6e787c;
  --color-default-dark: #596063;

  --color-cancel: #{$red5};
  --color-cancel-dark: #6e1219;

  --color-success: #{$green5};
  --color-success-dark: #{$green7};

  --color-secondary: #{$blue3};
  --color-selected: #{$base};
  --color-focus: #337ab7;//#E77600;//#EC9F09;   --color-accent: #ec9f09;
  --color-link: #2d699e;

  --color-background-primary: var(--color-primary);
  --color-background-primary-hover: var(--color-primary-hover);

  --color-background-light: #{$gray1};
  --color-background-white: #fffff;
  --color-background: #{$gray3};
  --color-background-black: #000;
  --color-background-dark: #{$gray8};

  --color-border-light: #{$gray1};
  --color-border-white: #fff;
  --color-border: #{$gray3};
  --color-border-black: #000;
  --color-border-dark: #{$gray8};

  




  

  --border-radius-small: 2px;
  --border-radius: 4px;
  --border-radius-large: 6px;

  --button-default: var(--color-default);
  --button-primary: var(--color-primary);
  --button-primary-light: var(--color-primary-light);
  --button-primary-dark: #2C699C;
  --button-secondary: #{$base};
  --button-cancel: var(--color-cancel);
  --button-delete: #{$red5};


  --a-default: var(--color-primary-light);
  --a-hover: var(--color-primary);


  --focus: 2px solid var(--color-focus);
  --font-small: 85%;   --line-height: 1.445;

  --margin-xsmall: 12px;
  --margin-small: 20px;
  --margin-default: 30px;
  --margin-large: 40px;
  --margin-xlarge: 45px;

  --opacity-disabled: 0.4;

  --padding-small: 10px;
  --padding-default: 15px;
  --padding-large: 20px;

  --pressed-top: 1px;
  --pressed-left: 1[x];