@define-color base   #24273a;
@define-color mantle #1e2030;
@define-color crust  #181926;

@define-color text     #cad3f5;
@define-color subtext0 #a5adcb;
@define-color subtext1 #b8c0e0;

@define-color surface0 #363a4f;
@define-color surface1 #494d64;
@define-color surface2 #5b6078;

@define-color overlay0 #6e738d;
@define-color overlay1 #8087a2;
@define-color overlay2 #939ab7;

@define-color blue      #8aadf4;
@define-color lavender  #b7bdf8;
@define-color sapphire  #7dc4e4;
@define-color sky       #91d7e3;
@define-color teal      #8bd5ca;
@define-color green     #a6da95;
@define-color yellow    #eed49f;
@define-color peach     #f5a97f;
@define-color maroon    #ee99a0;
@define-color red       #ed8796;
@define-color mauve     #c6a0f6;
@define-color pink      #f5bde6;
@define-color flamingo  #f0c6c6;
@define-color rosewater #f4dbd6;

* {
    color: @text;
    font-family: "Fira Sans";
}

.background,
#bar {
    background: transparent;
}

#bar {
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

#bar #start,
#bar #center,
#bar #end,
.popup {
    background: rgba(36, 39, 58, .5);
    font-size: 16px;
    border: 1px solid @surface2;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.upower,
.clock,
.workspaces .item,
.launcher .item,
.popup-launcher .popup-item,
.tray {
    background: @surface0;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.popup-launcher .popup-item {
    margin-top: 5px;
    margin-bottom: 5px;
}

.workspaces .item,
.launcher .item {
    border: 1px solid transparent;
    font-size: 24px;
}

.workspaces .item.focused,
.launcher .item.focused {
    border: 1px solid @lavender;
}

.tray {
    padding-left: 5px;
    padding-right: 5px;
}