:root {
    /* Base color */
    --base-primary: #2777f2;
    --base-on-primary: #fff;
    --base-error: #d34c4d;

    /* Text & Icon color */
    --text-icon-primary-on-dark: #fff;
    --text-icon-secondary-on-dark: #bababa;
    --text-icon-tetriary-on-dark: #737373;
    --text-icon-primary-on-light: #141414;
    --text-icon-secondary-on-light: #717171;
    --text-icon-tetriary-on-light: #d7d7d7;
    --night-text-icon-tetriary-on-dark: #505050;

    /* Border color */
    --border-primary-on-dark: #424242;

    /* Divider color */
    --divider-primary-on-dark: #424242;

    /* Background color */
    --background-primary-background: radial-gradient(50% 50% at 50% 50%, #171717 0%, #0a0a0a 100%);
    --surface-primary: #1e1e1e;
    --surface-on-primary-surface: #262626;
    --surface-secondary: #4d4d4d;

    /* State color */
    --state-primary-pressed-and-hover: #1f5fc2;
    --state-primary-disabled: #12284a;
    --state-secondary-default: #212121;
    --state-secondary-pressed-and-hover: #363636;
    --state-secondary-disabled: #131313;
    --state-dangerous-default: #d34c4d;
    --state-dangerous-pressed-and-hover: #9e3b3c;
    --state-dangerous-disabled: #d37c7d;
    --state-secondary-outlined-pressed-and-hover: #363636;
    --night-state-secondary-disabled: #1a1a1a;

    /* Decorative color */
    --decorative-green: #28c76f;
    --decorative-surface-error: rgba(211, 76, 77, 0.10);
    --decorative-orange: #ff9900;
}