:root {
    /* This is the DCR default styling */
    /**/
    --accent-hue: 210.54;
    --accent-saturation: 64.37%;
    --accent-lightness: 34.12%;
    /*
    --accent-delta: 2;
    --accent-lightness-clamped: clamp(40%, var(--accent-lightness), 70%);
    */
    /*Fluent*/
    --control-corner-radius: 4 !important;
    --layer-corner-radius: 8 !important;
    /*Fluent Colors*/
    /*Almost ISO 3864 Safety colors*/
    --secondary: #005387 !important; /*Signal Blue*/
    --success: #237F52 !important; /*Signal Green*/
    --warning: #F5A400 !important; /*School Bus Yellow*/
    --error: #922724 !important; /*Vivid Auburn*/
    --info: #7c878e !important; /*Aluminium*/

    --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. Attempts to maintain a reasonable contrast between accent and text color*/
    /*Usually no need to alter. Try --accent-lightness-clamped or --accent-delta before changing these */
    /*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) * 2%))) !important;
    --accent-fill-active: hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 3%))) !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) * var(--dark-mode) * 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) * var(--dark-mode) * 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) * var(--dark-mode) * 3%))) !important;
    --accent-foreground-focus: var(--accent-foreground-rest) !important;
    /*Outlines Accent*/
    --accent-stroke-control-rest: linear-gradient(hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 1%))) 90%, hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) - (var(--accent-delta) * 3%))) 100%) !important;
    --accent-stroke-control-hover: linear-gradient(hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 3%))) 90%, hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) - (var(--accent-delta) * 1%))) 100%) !important;
    --accent-stroke-control-active: hsl(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness-clamped) + (var(--accent-delta) * 4%))) !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: "PublicSans Variable", sans-serif !important;
    --font-weight: 300 !important;
    --type-ramp-minus-2-font-size: xx-small !important;
    --type-ramp-minus-1-font-size: x-small !important;
    --type-ramp-base-font-size: small !important;
    --type-ramp-plus-1-font-size: medium !important;
    --type-ramp-plus-2-font-size: medium !important;
    --type-ramp-plus-3-font-size: large !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"],
    :root[data-theme="system-light"] {
        /*--flow-clouds: var(--flow-sky);*/
    }

    :root[data-theme="dark"],
    :root[data-theme="system-dark"] {
        /*--flow-clouds: var(--flow-sky);*/
    }