$primary-fg: #ddd;
// $accent-color: rgb(76, 151, 255);
$accent-color: #ffa519;
// $core-color: rgb(64, 64, 64);
// $core-color: #424242;
$core-color: hsl(200, 5%, 22%); // Lighten the color by 30%
// $core-color: rgb(1, 40, 118);
// $core-color: rgb(31, 0, 132);
// $core-color: rgb(92, 82, 82);

$accent-color-lighter6: lighten($accent-color, 60%);
$accent-color-lighter5: lighten($accent-color, 40%);
$accent-color-lighter4: lighten($accent-color, 25%);
$accent-color-lighter3: lighten($accent-color, 20%);
$accent-color-lighter2: lighten($accent-color, 15%);
$accent-color-lighter1: lighten($accent-color, 10%);

$accent-color-darker1: darken($accent-color, 10%);
$accent-color-darker2: darken($accent-color, 15%);
$accent-color-darker3: darken($accent-color, 20%);
$accent-color-darker4: darken($accent-color, 25%);
$accent-color-darker5: darken($accent-color, 40%);
$accent-color-darker6: darken($accent-color, 60%);



$core-color-lighter6: lighten($core-color, 60%);
$core-color-lighter5: lighten($core-color, 40%);
$core-color-lighter4: lighten($core-color, 25%);
$core-color-lighter3: lighten($core-color, 20%);
$core-color-lighter2: lighten($core-color, 15%);
$core-color-lighter1: lighten($core-color, 10%);

$core-color-darker1: darken($core-color, 10%);
$core-color-darker2: darken($core-color, 15%);
$core-color-darker3: darken($core-color, 20%);
$core-color-darker4: darken($core-color, 25%);
$core-color-darker5: darken($core-color, 40%);
$core-color-darker6: darken($core-color, 60%);





:root {
    // --font-primary: Mulish, 'Roboto Condensed', sans-serif;
    --font-primary: 'Nimbus', 'Acorn Mode 0 New', system-ui, -apple-system, sans-serif;


    --font-primary-condensed: 'Roboto Condensed', sans-serif;

    --core-color: #{$core-color};
    --core-color-lighter1: #{$core-color-lighter1};
    --core-color-lighter2: #{$core-color-lighter2};
    --core-color-lighter3: #{$core-color-lighter3};
    --core-color-lighter4: #{$core-color-lighter4};
    --core-color-lighter5: #{$core-color-lighter5};
    --core-color-lighter6: #{$core-color-lighter6};
    --core-color-darker1: #{$core-color-darker1};
    --core-color-darker2: #{$core-color-darker2};
    --core-color-darker3: #{$core-color-darker3};
    --core-color-darker4: #{$core-color-darker4};
    --core-color-darker5: #{$core-color-darker5};
    --core-color-darker6: #{$core-color-darker6};

    --accent-color: #{$accent-color};
    --accent-color-lighter1: #{$accent-color-lighter1};
    --accent-color-lighter2: #{$accent-color-lighter2};
    --accent-color-lighter3: #{$accent-color-lighter3};
    --accent-color-lighter4: #{$accent-color-lighter4};
    --accent-color-lighter5: #{$accent-color-lighter5};
    --accent-color-lighter6: #{$accent-color-lighter6};
    --accent-color-darker1: #{$accent-color-darker1};
    --accent-color-darker2: #{$accent-color-darker2};
    --accent-color-darker3: #{$accent-color-darker3};
    --accent-color-darker4: #{$accent-color-darker4};
    --accent-color-darker5: #{$accent-color-darker5};
    --accent-color-darker6: #{$accent-color-darker6};

    --primary-fg: #{$primary-fg};


    // --ui-primary-bg: #FAA000;
    --ui-primary-bg: var(--accent-color-darker1);
    --ui-primary-fg: #000;

    --color-error: #faa;
}

$breakpoint-medium : 1280px;


html {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-primary) !important;
    color: var(--primary-fg);
    font-size: 18px;
    line-height: unset;
}


.tabs li {
    background-color: #111;
}

.settings {
    fieldset {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1em;
        margin-bottom: 1em;

        legend {
            font-size: 1.25em;
            font-weight: bold;
            padding: 0 0.5em;
        }
    }

    label,
    input {
        padding: 0.25em 0.5em;
    }
}