body {
    --primary-color: #004cb4;
    --h-primary-color-alpha: color-mix(in srgb, var(--primary-color), transparent 50%);
    --primary-color-variant: #1d5fc0;
    --h-primary-color-variant-alpha: color-mix(in srgb, var(--primary-color-variant), transparent 50%);

    --primary-dark-color: #0c3a73;
    --primary-light-color: #a2cdfc;
    --on-primary-color: #ffffff;
    --on-primary-dark-color: #808080;
    --on-primary-light-color: #000000;

    --alternate-color: #ff8832;
    --on-alternate-color: #000000;

    --canceled-bg-color: #555555;
    --on-canceled-color: #ffffff;

    --interrupted-bg-color: #d4c70a;
    --on-interrupted-color: #2c2a2a;

    --gray-font-color: #d7d7d7;

    --transparent-color: #0000004D;

    --secondary-color: #4CAF50;
    --h-secondary-color-alpha: color-mix(in srgb, var(--secondary-color), transparent 50%);
    --on-secondary-color: #000000;

    --background-color: #FFFFFF;
    --background-color-variant: #ececec;
    --background-color-variant-table-row: #dadada;
    --on-background-color: #000000;

    --error-color: #ff5656;
    --error-bg-color: #af1414;
    --on-error-color: #FFFFFF;

    --marge-xs: 5px;
    --marge-s: 10px;
    --marge-m: 15px;
    --marge-l: 20px;
    --marge-xl: 25px;
    --marge-xxl: 30px;

    --corner-radius-s: 5px;
    --corner-radius-l: 10px;
    --corner-radius-xxl: 100px;
}

body.dark-theme {
    --gray-font-color: #606060;

    --background-color: #252525;
    --background-color-variant: #2c2c2c;
    --background-color-variant-table-row: #393939;
    --on-background-color: #f3f3f3;
}