.design{
    --color-default: #616161;
    --color-foreground-white: white;
    --color-foreground-dark: #414141;
    --color-foreground-black: black;
    --color-foreground-highlight: red;
    --color-base-50: #f7f7f7;
    --color-base-100: #efefef;
    --color-base-200: #eeeeee;
    --color-base-300: #e6e6e6;
    --color-base-400: #dcdcdc;
    --color-border-1: #bbbbbb;
    --color-selected: var(--color-base-400);
    --color-selection: #c7c6c6;
    --color-foreground-selected: black;
    --color-foreground-selected-menu: white;
    --color-hover: var(--color-base-200);
    --color-foreground-hover: black;
    --color-background: #f5f5f5;
    --color-background-menu: var(--color-background);
    --color-background-controls: white;
    --color-selected-menu: var(--color-primary);
    --top-row-background: var(--color-base-50);
    --top-row-border: 1px solid #d6d5d5;
    --top-row-button-default-background: var(--color-base-100);
    --input-hover-border: 1px solid var(--color-secondary);
    --input-focus-border: 1px solid var(--color-secondary);
   
}

    .design.purple {
        --color-primary: #9631b0;
        --color-secondary: #662078;
    }

    .design.steel {
        --color-primary: #476f9a;
        --color-secondary: #385b80;
    }

    .design.green {
        --color-primary: #107c41;
        --color-secondary: #094926;
    }

    .design.orange {
        --color-primary: #c1651c;
        --color-secondary: #8e4a14;
    }

    .design.darkness {
        --color-primary: #3d3d3d;
        --color-secondary: #0a0a0a;
    }

    .design.darker {
        --color-base-50: #eaeaea;
        --color-base-100: #d9d9d9;
        --color-base-200: #d6d6d6;
        --color-base-300: #cccccc;
        --color-base-400: #bfbfbf;

        --color-background: #dcdcdc;
        --color-background-controls: #ebebeb;
        --top-row-background: #dcdcdc;
        --top-row-border: 1px solid #b8b8b8;
        --top-row-button-default-background: var(--color-base-200);

    }