
:root {

    /* fonts */
    --main-font: 'Segoe UI', 'bahnschrift', 'Arial', sans-serif;
    --details-font: 'Roboto', 'bahnschrift', 'Segoe UI', sans-serif;

    /* layout */
    --banner-height: 200px;
    --sidebar-width: 400px;

    /* main color scheme */
    --primary-color: #f4f4f4;
    --primary-color-contrast: black;
    --primary-color-glow: #dfdede;
    --primary-color-highlight: #ffffff;
    --default-background: var(--primary-color);
    --default-color: var(--primary-color-contrast);

    /* tmp */
    --detail-color: #2C666E;
    --detail-color-2: #AA5042;
    --detail-color-3: #C84630;

    --medium-color: #5e5e5e;

    --alert-color: #680b0b;
    --alert-color-contrast: #ffffff;
    --alert-color-highlight: rgb(154, 18, 18);
    --alert-color-glow: rgba(154, 18, 18, 0.5);

    --confirm-color: #046807;
    --confirm-color-contrast: #ffffff;
    --confirm-color-highlight: rgb(9, 145, 14);
    --confirm-color-glow: rgba(9, 145, 14, 0.5);

    /* sidebar */
    --sidebar-highlight-color: #AA5042;
    --sidebar-highlight-color-contrast: #ffffff;

    /* modals color scheme */
    --modal-primary-color: #ffffff;
    --modal-primary-color-contrast: #494949;
    --error-modal-background: #ffffff;
    --error-modal-border-color: var(--alert-color);
    --error-modal-headline-color: var(--alert-color);


    /* input-form color schemes */
    --textbox-background-color: #ffffff;
    --textbox-border-color: #757575; /*#ddd;*/
    --textbox-focus-color: var(--detail-color);
    --textbox-text-color: var(--detail-color);
    --textbox-placeholder-color: #373737;

    /* button color scheme */
    --button-background-color: var(--detail-color);
    --button-text-color: white;
    --button-hover-background: var(--detail-color);
    --button-hover-text: white;
    --button-hover-glow: var(--detail-color);




}



/* Dark Mode */
[data-theme="dark"] {
    --primary-color: #141617;
    --primary-color-contrast: #999999;
    --primary-color-glow: #161616;
    --primary-color-highlight: #000;
    --default-background: var(--primary-color);
    --default-color: var(--primary-color-contrast);

    --detail-color: #2C666E;
    --detail-color-2: #AA5042;
    --detail-color-3: #C84630;
}