/**
    # Color

    1. Default color
    2. Inverse colours
*/
.color-mode-light,
:root {
    --brand: /*style.primary(*/#3e653e/*)*/;
    --button: /*style.button-background(*/#052A800F/*)*/;
    --button-hovered: /*style.button-background-hover(*/#0421661F/*)*/;
    --button-pressed: /*style.button-background-press(*/#03194D3D/*)*/;
    --button-color: /*style.button-color(*/inherit/*)*/;
    --button-color-hovered: /*style.button-color-hover(*/inherit/*)*/;
    --button-color-pressed: /*style.button-color-press(*/inherit/*)*/;
    --button-subtle: /*style.button-subtle-background(*/transparent/*)*/;
    --button-subtle-hovered: /*style.button-subtle-background-hover(*/#052A800F/*)*/;
    --button-subtle-pressed: /*style.button-subtle-background-press(*/#0421661F/*)*/;
    --fill-danger: #F0414126;
    --fill-information: #2A63EA26;
    --fill-inverse: #353B4E;
    --fill-inverse-hovered: #242635;
    --fill-inverse-pressed: #13121C;
    --fill-neutral: #052A800F;
    --fill-neutral-hovered: #0421661F;
    --fill-neutral-pressed: #03194D3D;
    --fill-neutral-subtle: transparent;
    --fill-neutral-subtle-hovered: #052A800F;
    --fill-neutral-subtle-pressed: #0421661F;
    --fill-success: #13AE8426;
    --fill-warning: #FFDE2126;
    --heading: /*style.heading-color(*/#13121C/*)*/;
    --icon: currentColor;
    --icon-primary: /*style.primary(*/#3e653e/*)*/;
    --link: /*style.link-color(*/#0065F2/*)*/;
    --link-hovered: /*style.link-color-hover(*/#0065F2/*)*/;
    --surface-overlay: /*style.surface_overlay_light(*/#FFF/*)*/;
    --surface: /*style.surface_light(*/#FFF/*)*/;
    --surface-sunken: /*style.surface_sunken_light(*/#EFF2F9/*)*/;
    --text: /*style.text-color(*/#353b4e/*)*/;
    --text-brand: var(--brand);
    --text-danger: #DA3B3B;
    --text-eyebrow: /*style.eyebrow-color(*/#6C7D93/*)*/;
    --text-information: #265AD5;
    --text-inverse: #EFF2F9;
    --text-selected: var(--text-brand);
    --text-subtle: #696F87;
    --text-success: #119E78;
    --text-warning: #E87F1E;
    color: var(--text);
    }

/*
    # Dark color mode
    
    @todo: these require style.json configurations
*/
.color-mode-dark {
    --button: #A3A7CC14;
    --button-hovered: #A3A7CC29;
    --button-pressed: #A3A7CC47;
    --button-color: inherit;
    --button-color-hovered: inherit;
    --button-color-pressed: inherit;
    --button-subtle: transparent;
    --button-subtle-hovered: #A3A7CC14;
    --button-subtle-pressed: #A3A7CC29;
    --fill-danger: #F0414126;
    --fill-information: #2A63EA26;
    --fill-inverse: #EFF2F9;
    --fill-inverse-hovered: #D5DBEA;
    --fill-inverse-pressed: #BCC4DB;
    --fill-neutral: #A3A7CC14;
    --fill-neutral-hovered: #A3A7CC29;
    --fill-neutral-pressed: #A3A7CC47;
    --fill-neutral-subtle: transparent;
    --fill-neutral-subtle-hovered: #A3A7CC14;
    --fill-neutral-subtle-pressed: #A3A7CC29;
    --fill-success: #13AE8426;
    --fill-warning: #FFDE2126;
    --heading: #FFF;
    --surface-overlay: /*style.surface_overlay_dark(*/#1F1F31/*)*/;
    --surface: /*style.surface_dark(*/#191929/*)*/;
    --surface-sunken: /*style.surface_sunken_dark(*/#131321/*)*/;
    --text: #EFF2F9;
    --text-brand: var(--brand);
    --text-danger: #F58080;
    --text-information: #7097F1;
    --text-inverse: #131321;
    --text-selected: var(--text-brand);
    --text-subtle: #848DAA;
    --text-success: #61C9AD;
    --text-warning: #FFB26A;
    color: var(--text);
    }