:root {
    --background-default: #FFFFFF;
    --text-primary: #191A1B;
    --text-secondary: #363739;
    --text-disabled: #62676A;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #E2E4E5;
    --surface-default: #F6F6F7;
    --shadow: rgba(25, 26, 27, 0.2);
    --overlay: rgba(25, 26, 27, 0.4);
}

@media(prefers-color-scheme: dark) {
    :root {
        --background-default: #191A1B;
    --text-primary: #FFFFFF;
    --text-secondary: #F6F6F7;
    --text-disabled: #A1A5A7;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #4D5154;
    --surface-default: #2F3032;
    --shadow: rgba(255, 255, 255, 0.2);
    --overlay: rgba(255, 255, 255, 0.4);
    }
}


[data-theme='default'] {
    --background-default: #FFFFFF;
    --text-primary: #191A1B;
    --text-secondary: #363739;
    --text-disabled: #62676A;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #E2E4E5;
    --surface-default: #F6F6F7;
    --shadow: rgba(25, 26, 27, 0.2);
    --overlay: rgba(25, 26, 27, 0.4);
}

[data-theme='dark'] {
    --background-default: #191A1B;
    --text-primary: #FFFFFF;
    --text-secondary: #F6F6F7;
    --text-disabled: #A1A5A7;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #4D5154;
    --surface-default: #2F3032;
    --shadow: rgba(255, 255, 255, 0.2);
    --overlay: rgba(255, 255, 255, 0.4);
}

[data-theme='gray'] {
    --background-default: #E2E4E5;
    --text-primary: #191A1B;
    --text-secondary: #363739;
    --text-disabled: #62676A;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #C5C8CA;
    --surface-default: #F6F6F7;
    --shadow: rgba(25, 26, 27, 0.2);
    --overlay: rgba(25, 26, 27, 0.4);
}

[data-theme='pink'] {
    --background-default: #191A1B;
    --text-primary: #FFC6E7;
    --text-secondary: #FFC6E7;
    --text-disabled: #FFC6E7;
    --text-inverse-subdued: #FFC6E7;
    --border-default: #404345;
    --surface-default: #3C0023;
    --shadow: rgba(255, 198, 231, 0.2);
    --overlay: rgba(255, 198, 231, 0.4);
}

[data-theme='blue'] {
    --background-default: #191A1B;
    --text-primary: #94DEF7;
    --text-secondary: #BAEAFA;
    --text-disabled: #BAEAFA;
    --text-inverse-subdued: #A1A5A7;
    --border-default: #404345;
    --surface-default: #042A36;
    --shadow: rgba(148, 222, 247, 0.2);
    --overlay: rgba(148, 222, 247, 0.4);
}