:root {
    /* This is the DCR default styling. Do not delete these colors, but instead modify them. */
    --accent-hue: 215;
    --accent-saturation: 100%;
    --accent-lightness: 55%;
    --footer-background-color: #0f142e;
    --footer-rump-color: #dce9fc0f;
    --accent-text: white;
    --secondary: #036ac4;
    /*Fluent*/
    --control-corner-radius: 4 !important;
    --layer-corner-radius: 8 !important;
    /*Fluent Colors*/
    --success: #0E700E !important;
    --warning: #E9835E !important;
    --error: #BC2F32 !important;
    --info: #8fa3d6 !important;
    --presence-available: #13a10e !important;
    --presence-away: #eaa300 !important;
    --presence-busy: #d13438 !important;
    --presence-dnd: #d13438 !important;
    --presence-offline: #adadad !important;
    --presence-oof: #c239b3 !important;
    --presence-unknown: #d13438 !important;
    /*Adaptive Color. Usually no need to touch*/
    --accent-lightness-clamped: var(--accent-lightness);
    --accent-delta: 5;
    --dark-mode: 1;
    /*Accent*/
    --accent-fill-rest: hsl(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-clamped)) !important;
    --accent-fill-hover: hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 1% - 2%))) !important;
    --accent-fill-active: hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 2% - 2%))) !important;
    --accent-fill-focus: var(--accent-fill-rest) !important;
    /*Foreground Accent*/
    --accent-foreground-rest: hsl(var(--accent-hue), calc(var(--accent-saturation) - var(--accent-delta) * var(--dark-mode) * 3%), calc(var(--accent-lightness-clamped) - (var(--accent-delta) * 1%))) !important;
    --accent-foreground-hover: hsl(var(--accent-hue), calc(var(--accent-saturation) - var(--accent-delta) * var(--dark-mode) * 3%), calc(var(--accent-lightness-clamped) - (var(--accent-delta) * 2%))) !important;
    --accent-foreground-active: hsl(var(--accent-hue), calc(var(--accent-saturation) - var(--accent-delta) * var(--dark-mode) * 3%), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 2%))) !important;
    --accent-foreground-focus: var(--accent-foreground-rest) !important;
    /*Outlines Accent*/
    --accent-stroke-control-rest: linear-gradient(var(--accent-fill-rest) 90%, var(--accent-foreground-rest) 100%) !important;
    --accent-stroke-control-hover: linear-gradient(var(--accent-fill-hover) 90%, var(--accent-foreground-hover) 100%) !important;
    --accent-stroke-control-active: var(--accent-fill-hover) !important;
    --accent-stroke-control-focus: var(--accent-stroke-control-rest) !important;
    /*Text on accent*/
    --foreground-on-accent-rest: var(--accent-text) !important;
    --foreground-on-accent-hover: var(--accent-text) !important;
    --foreground-on-accent-active: var(--accent-text) !important;
    --foreground-on-accent-focus: var(--accent-text) !important;
    /*Fonts*/
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif !important;
    --type-ramp-base-font-size: small !important;
    --type-ramp-minus-1-font-size: smaller !important;
    --type-ramp-minus-2-font-size: x-small !important;
    --type-ramp-plus-1-font-size: medium !important;
    --type-ramp-plus-2-font-size: large !important;
    --type-ramp-plus-3-font-size: larger !important;
    --type-ramp-plus-4-font-size: x-large !important;
    --type-ramp-plus-5-font-size: xx-large !important;
    --type-ramp-plus-6-font-size: xxx-large !important;
    /*Disbled opacity*/
    --disabled-opacity: 0.5 !important;
}


:root,
[data-theme="light"],
[data-theme="system-light"] {
    --flow-sky: #f5f7fa;
    --flow-clouds: #d4dde254;
    --flow-footer: #0f142e;
    --accent-lightness-clamped: min(var(--accent-lightness), 60%);
}

[data-theme="dark"],
[data-theme="system-dark"] {
    --flow-sky: #1a1a1a;
    --flow-clouds: #d4dde254;
    --flow-footer: #141414;
    --accent-lightness-clamped: max(var(--accent-lightness), 40%);
    --accent-delta: -5;
    --dark-mode: -1;
}